babel이 es6이상의 자바스크립트 코드를 es5로 변경해주는 것과 같이 sass 또한 sass 문법으로된 코드를 css로 바꿔준다.
sass에는 두 가지 sass, scss 가 있다. 만약 sass(문법) + css 코드까지 사용할거면 scss 를 사용한다.
sass-loader 관련해서는 여기 를 참고하자.
아래 명령어로 설치를 하면 된다.
1
npm install sass-loader sass webpack --save-dev
sass-loader: 웹팩에서 sass파일을 만나면 node-sass를 돌려주는 역할node-sass: sass코드를 css로 컴파일 하는 역할- webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
module: {
rules: [
process.env.NODE_ENV === "production"
? MiniCssExtractPlugin.loader // 프로덕션 환경
: "style-loader", // 개발 환경
"css-loader",
"sass-loader"
],
},
};
로더의 동작순서는 다음과 같다.
1) sass-loader: Sass -> css 컴파일 2) css-loader: css -> CommonJS 컴파일 3) style-loader: js 파일 -> css 파일로 추출
빌드를 실행하면 아래 이미지와 같이 정상적으로 처리된 것을 확인할 수 있다.
