[인프런] 프론트엔드 개발환경의 이해와 실습 (사스 Sass)

사스를 사용하는 방법에 대해 알아보자.

사스(Sass)

바벨을 설정하는 것과 거의 유사하다. 바벨이 ES6를 ES5로 변환해주듯이, 사스는 sass, scss(sass+css)를 css로 바꿔주는 전처리를 한다.

먼저 두가지를 설치해주어야 한다.

$ npm install -D sass-loader node-sass

• node-sass : sass코드를 css로 컴파일해줌
• sass-loader: 웹팩에서 sass를 만나면 node-sass를 내부적으로 실행시켜줌

webpack.config.js

...

module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          process.env.NODE_ENV === "production"
            ? MiniCssExtractPlugin.loader // 프로덕션 환경
            : "style-loader", // 개발 환경
          "css-loader",
          "sass-loader"
        ]
      },

...

use 배열은 실행 순서가 맨 마지막부터이기 때문에 sass-loader를 맨 마지막에 작성해주었다. sass-loader가 먼저 scss 파일을 css로 변환해주고, 그 변환된 css는 기존 css 파일과 함께 css-loader가 적용되는 것이다.

 

node-sass와 sass-loader는 버전에 민감한 편이라, node 버전과 잘 호환되는 버전인지 확인해줄 필요가 있다.

 

node v14.17.6 기준 node-sass@5, sass-loader@10 호환됨

 

 

---

출처: [인프런] 프론트엔드 개발환경의 이해와 실습