[Webpack] 전처리기 사용하기 + vendor prefix ( scss, less ,postCSS )

 

Intro.

프론트엔드 개발할 때, 아마 대부분 순수 css만으로 개발하진 않을거라 생각합니다. react ,vue etc.. 같은 프레임워크들은 CSS-in-JS를 지원하고, 또 scss와 같은 전처리를 통해 상당히 쉽게 스타일링을 진행할 수 있습니다. CSS-in-JS의 경우, 이번 글에선 크게 다룰게 없는게, 애당초 자바스크립트 런타임단에서 실행되기에, 사실 웹팩에서 직접적으로 관련 모듈 조작을 통해 최적화 하긴 어렵습니다. ( code splitting , lazy loading으로 가능하긴함) 따라서 이번 글에선 전처기 위주 셋팅에 관해 글을 써보겠습니다.

 

 

 

 

 

Goal

1. 웹팩에 less 모듈 번들링 가능하게 하기

2. 웹팩에 scss 모듈 번들링 가능하게 하기

3. 웹팩에 vendor prefix(via , postCSS) 가능하게 하기

Method

 

 

 

1. (Common) vendor prefix 설정을 위해 autoprefixer, 웹팩이 postcss 번들링 할 수 있게 postcss-loader를 설치합니다.

yarn add -D postcss-loader autoprefixer

 

 

2. (Common) 루트단에 .browserslistrc 파일을 생성하고 지원할 브라우저 옵션을 명시합니다. (** postCSS가 해당파일에 의존하여 vendor prefix를 진행할지 말지 결정하기에 반드시 만드셔야합니다.**)

 

저같은 경우, 최근 ~ 10버전까지 중 아직 지원하는 애들만 타깃으로 잡겠습니다.

// .browserslistrc 
last 10 versions

 

https://browsersl.ist/

Browserslist

 

 

 

3. postCSS 설정을 위해, 루트단에 postcss.config.js를 만듭니다. 저희는 vendor prefix하고 싶으므로, autoprefixer를 플러그인으로 넣어줍니다.

 

https://www.npmjs.com/package/autoprefixer

autoprefixer

module.exports = {
  plugins: [require('autoprefixer')]
};

 

 

4 - 1. (less) less 모듈 및 로더를 설치합니다. 

yarn add -D less-loader

yarn add less

 

 

5 - 1. (less) 웹팩 설정파일에 해당 과정을 추가합니다.

 

반드시!!, postcss-loader는 'css-loader'와 'less-loader'사이에 위치해야합니다.

 

...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      }
     ]
  }
      
...

 

 

 

4 - 2 (sass) sass 모듈 및 로더를 설치합니다.

yarn add -D sass-loader

yarn add sass

 

 

5 - 2. (sass) 웹팩 설정파일에 해당 과정을 추가합니다.

 

...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      }
     ]
  }
      
...