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

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea