36. Vue - 컴포넌트 전역 스타일

1. Sass loader 

일반적으로 부트스트랩을 사용하게 되면 사용하는 컴포넌트의 script 태그에 매번 @import 키워드를 통하여 부트스트랩을 가져오게 된다. 하지만, 이러한 방식은 코드를 반복적으로 사용하게 되어 코드의 효율이 떨어지게 된다. 계속해서 컴포넌트를 로드할 때마다 해당 부트스트랩 파일을 읽어야 하기 때문이다. 

 

그렇다면 한번에 스타일을 읽어올 수 있다면 더 효율적이지 않을까? 그러한 방법은 없을까? 

 

이를 해결해주는 오픈소스가 Sass-loader 이다. 

---

2. 설치 

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

webpack-contrib/sass-loader

 

기존에 sass-loader를 설치해놓았다면 따로 설치를 필요로 하지 않는다.

만약 설치를 필요로 한다면, 위의 공식문서를 참고하기를 바란다. 

---

3. 사용할 기능(option)

위의 sass-loader 공식문서를 확인해 보면 아래의 Option태그를 확인할 수 있다. 

클릭하면 확대됩니다.

 

스타일을 전역으로 가져오는 방법을 구현하기 위해 additionalData 라는 옵션을 사용할 것인데, 저 부분을 클릭해보면 사용 방법 이해를 돕기위한 예제코드를 확인할 수 있다. 

 

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

webpack-contrib/sass-loader

 

---

3. 작동방식 

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

 

위의 코드는 webpack.config.js 부분에 작성하게 될 코드다.

기존과는 다르게 use 속성 부분에 String 형태로 모듈을 등록하는게 아닌, 객체 형태로 등록하여 options 라는 속성을 이용한다. 

 

options 속성 안에 addtionalData 옵션을 기입하고 그 안에 value로 지정되는 값이 로드될 모든 CSS 파일의 가장 앞쪽에 삽입되는 형태로 동작하게 된다. 

 

이 부분을 설정하게 되면 앞으로 컴포넌트의 script 태그마다 @import 키워드를 사용하여 스타일을 가져오지 않아도 된다. 

---

4. 설정 

다음과 같이 webpack.config.js 부분에 설정하면 된다. 

 

클릭하면 확대됩니다. 

위의 사진은 옵션 설정 이전에 sass-loader를 사용하는 방식으로 등록되어있는 상태이다.

 

클릭하면 확대됩니다. 

위의 사진은 옵션 설정을 위해 sass-loader를 객체 데이터로 바꾼 뒤, addtionalData를 설정한 모습이다.