webpack loader(css, scss, sass import로 가져오기)

npm i -D css-loader style-loader 기본 이거 2개 있어야 css 파일을 import로 가져올 수 있다.

여기서 import로 가져온다는 것은 javascript의 모듈로서 css파일을 사용하겠다는 것이다.

기존 원칙대로면 css파일을 인라인으로 쓰던가, 아무튼 html파일에 때려넣어줬어야했는데,

javascript 파일에 css가져오는거다

 

npm i -D sass sass-loader 이것도 설치해줘야 sass를 쓰겠지

 

 

 

원래 webpack에 설정안하고 build해버리면 에러 뜨는데

아무튼 로더 잘써봐 에러

 

아무튼 webpack.config.js에 module 부분에 rules 배열안에 추가해줬다.

이러면 npm run build 했을 때 제대로 됨, 적용도 되어서 padding 0되는 거 확인

module: {

    rules: [

      {

        test: /\.s[ac]ss$/i,    // sass 또는 scss 파일에 대해서

        use: [

          "style-loader",   // style 생성

          "css-loader",     // CSS를 commonJS로 변환

          "sass-loader"     // Sass를 CSS로 컴파일

          // 넣는 순서가 중요하다. 배열 안에 맨 뒤부터 처리된다.

        ]

      }

    ]

  }