[Vue.js][Ch4][영화검색 사이트] 모든 컴포넌트에서 전역 스타일 가져오기

부트스트랩이 필요할때마다 부트스트랩을 지정해놓은 main.scss 파일을 import 했다.

매번 main.scss 파일을 가져오는 것은 불편한 일이기 때문에

webpack 번들러를 통해 main.scss를 명시하지 않아도 컴포넌트 내부에서 사용할 수 있게 만들어보자.

 

1. 구글에 sass-loader github > https://github.com/webpack-contrib/sass-loader 이동 > Options > additionalData 확인

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: "$env: " + process.env.NODE_ENV + ";",
            },
          },
        ],
      },
    ],
  },
};

• additionalData를 통해서 필요한 데이터를 추가해 줄 것이다.

2. 가장 먼저 동작할 sass-loader 부분에 options > additionalData 추가

use: [
  'vue-style-loader',     // vue-style-loader가 가장 마지막에 해석될 수 있도록
  'style-loader',
  'css-loader',
  'postcss-loader',
  {
    loader: 'sass-loader',
    options: {
      additionalData: '@import "~/scss/main";'
    }
  }
]

• 문자 데이터로 이루어진 '@import "~/scss/main";' 한줄의 코드가 모든 scss 파일의 제일 앞단에 들어간다.
  • import ~~~ main.scss를 작성할 필요가 없어진다.

3. 부트스트랩이 필요할때마다 import한 기존 코드 제거

4. 서버 재부팅하여 확인