sass, scss 번들링

이짜젠·2021년 6월 22일
0

package.json

"dependencies": {
  "css-loader": "^5.0.1", // css를 읽어준다.
  "style-loader": "^1.2.1" // style 태그로 주입시킨다.
  "node-sass": "^4.14.1" // scss 컴파일러 설치 & node에서 사용할수 있도록 해준다.
  "sass-loader": "^9.0.2" // scss를 읽어준다.
}

webpack.config.js

module.exports = (env, options) => {
  return {
    module: {
      rules: [
        {
          { 
            test: /\.s[ac]ss/, 
          	/*
          		역순으로 동작한다.
                sass-loader -> css-loader -> style-loader
                style-loader 대신 mini-css-extract-plugin을 사용해도 된다.
	        */
            use: [ 'style-loader', 'css-loader', 'sass-loader' ]
      		
    	  }
        }
      ]
    } 
  }
}

참고

https://heropy.blog/2017/10/18/webpack\_1\_start\_ejs\_sass/

profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

0개의 댓글