Vue 프로젝트 모든 컴포넌트에서 전역 스타일 가져오기

 

@import "~/scss/main";

 

- 매번 입력하기가 번거롭다

- 자동으로 맨 앞으로 해당 코드가 붙도록 webpack.config.js 를 수정해준다

 

Vue 프로젝트 모든 컴포넌트에서 전역 스타일 가져오기

 

1. /webpack.config.js 수정

 module: {
    rules: [
      {
...
      },
      {
        test: /\.s?css$/,
        use: [
          // 순서 중요!
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: '@import "~/scss/main";'
            }
          }
        ]
      },
...

 

2. 사용중인 @import "~/scss/main" 제거

 

---

 

참고

https://github.com/webpack-contrib/sass-loader

GitHub - webpack-contrib/sass-loader: Compiles Sass to CSS