# 7. SASS Loader

* Intro
  * SASS: css작성시 가독성 높은 표현법 사용, 다양한 문법 제공(css 확장된 형태)
  * SASS를 사용하는 경우, SASS파일을 css파일로 변환하는 과정을 거쳐야한다.
  * SASS를 사용하면, 중복되는 코드를 제거하고 조금더 분명하게 css설계가 가능하기 때문에 사용
  * SASS파일을 모듈로 해석하는 방법에 대한 실습
* 실습
  *   sass-loader, node-sass(node환경에서 sass파일을 읽어들이는 역할) 설치

      ```
      npm i -D sass-loader node-sass
      ```
  * **loader chaining**
    * css를 SASS로 작성할 경우, build된 결과물은 SASS파일이 아닌, css결과물이어야 한다.
    * 과정: SASS모듈을 읽고 해석 => css 파일로 컴파일 => 컴파일된 css파일이 css-loader에 의해 build 결과물을 합쳐서 완성
    * 따라서 SASS-loader를 먼저 작동 => 결과물을 받아서 css-loader 작동
    * 즉, loader를 읽어들이는 순서가 필요한데 이를 chaining이라고 한다.
    * 그동안 loader설정은 use key에 배열로 설정을 했었는데, 이에대한 우선순위는 index크기가 클수록 먼저 적용이 되었었다.
    * loader의 chaining방식은 index크기로 적용하는 방식 이외에 문자열로 설정 할 수 있다.
  * **용도에 따라 css 파일들을 loader들이 다르게 적용되도록**
    * css파일들을 만들때 2가지 목적을 가짐
      * global 범위 css
      * local 범위 css: 예: 특정 component 범위 내부에서만 작동
    *   이름을 인식해서 분기처리를 할 예정

        ```
        filename.module.scss => css modules
        filename.scss => global
        ```
    *   적용예

        ```javascript
        module.exports ={
            module:{
                rules: [{
                    test: /\.s?css$/i,
                    oneOf: [{
                        test: /\.module\.s?css$/,
                        use: [
                            {
                                loader: MiniCssExtractPlugin.loader,
                            },
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: true,
                                },
                            },
                            <!-- 축약형으로 작성 -->
                            'sass-loader'
                        ]}, {
                        use: [
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            'sass-loader'
                            ]
                        }]
                },
            }
        }
        ```

        * Oneof 프로퍼티에서 module이라는 keyword에 의해서 global로 적용할지, local로 적용할지 결정
        * loader적용되는 순서(index 큰 순): sass-loader => css-loader => MiniCssExtractPlugin.loader
        * css 파일이름에 module이 적용되었을 경우에만 option이 적용이되서 css의 module을 읽을 수 있다.
        * scss-structure : [7-1 Sass Architecture](https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture)
          * scss도 import 로 파일을 가져올수있기 때문에 가능한 구조
