SASS(실습) - 웹팩(Webpack) | 김정환

TODO.1

SASS 코드를 사용할수 있겠끔 sass-loader를 구성하세요.

 

빌드 후 어떤 오류가 있는 지 체크하자. 

$ npm run build 

ERROR in ./src/views/FormView.scss 1:0
Module parse failed: Unexpected character '@' (1:0)

 

에러 번역) 모듈을 파싱할 때 @ 문자를 반환할 수 없다. 

→ 엔트리 포인트부터 시작해서 FormView.js를 가져오고 해당 js 파일에서 FormView.scss 파일을 가져오는데 이를 처리할 수 있는 sass-loader가 필요하다. 

 

 sass 코드를 css로 컴파일 해준다.

$ npm i node-sass

 

 웹팩에서 sass 파일을 만나면 node-sass를 내부적으로 돌려준다.

$ npm i sass-loader

 

webpack.config.js : 

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        loader: [
          "style-loader",  // 변환된 자바스크립트 코드를 HTML의 style 노드로 추가
          "css-loader",    // 변경된 CSS를 CommonJ에 자바스크립트 코드로 변환
          "sass-loader"    // SASS 파일을 CSS로 컴파일
        ]
      },
    ]
  }
}

* sass 코드만 쓸 경우 sass 확장자 / sass와 css 코드를 쓸 경우 scss 확장자