scss파일도 sass-loader를 사용하더라.

node-sass : scss 파일에 변화가 있을 떄 마다 자동으로 리컴파일

npm i sass-loader node-sass

  • webpack-dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      },
     ...
    ]
  },
...
  • src/main.js
1
2
3
4
5
6
7
require("babel-runtime/regenerator")
require("react-hot-loader/patch")
require("babel-register")
require("webpack-hot-middleware/client?reload=true")
require("./main.scss");  // scss파일을 추가
require("./index.html");
require("./app.js")
  • main.scss

SCSS 문법 작성

끝.

POSTCSS

여기에 원하는 CSS 코딩 방법을 골라 사용하는 POSTCSS도 연동할 수 있다.

npm i postcss-loader

  • webpack.dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "postcss-loader"}, // 추가
          { loader: "sass-loader" }
        ]
      },
      // scss 없이 postcss 개별 연동도 가능!
      //{
        //test: /\.css$/,
        //exclude: /node_modules/,
        //use: [
          //{ loader: "style-loader" },
          //{ loader: "css-loader" },
          //{ loader: "postcss-loader" }
        //]
      //},
     ...
    ]
  },
...
  • postcss.config.js

원하는 CSS 모듈을 추가해준다.

1
2
3
4
5
6
module.exports = {
    plugins: [
        require('autoprefixer') // 자동으로 브라우저에 맞는 Css 프리픽스를 추가해준다.
        // require('postcss-nested') scss 방식의 nested css 지원
    ]
}

postcss만 사용할 경우는 파일 확장자도 css로 쓰면 된다.

Reference

https://www.udemy.com/webpack-beyond-the-basics