PostCSS 로더

PostCSS Loader 구성

postcss, postcss-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다. 그리고 PostCSS 구성 파일 postcss.config.js 파일을 프로젝트 루트에 생성하고 설정 코드를 작성합니다.

npm i postcss postcss-loader -D

PostCSS Preset Env 플러그인

postcss-preset-env 패키지를 프로젝트에 설치한 후, PostCSS 구성 파일 안에 플러그인을 설정합니다.

npm i postcss-preset-env -D

Autoprefixer 플러그인

Autoprefixer는 브라우저 제조사(vender) 접두사(-webkit-, -moz- 등)를 필요한 경우 자동으로 추가해주는 유용한 PostCSS 플러그인입니다. Autoprefixer는 PostCSS Preset Env에 포함되어 있습니다. 프로젝트에서 Autoprefixer를 사용하려면 PostCSS 구성 파일 플러그인 항목을 다음과 같이 수정합니다.

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        browsers: '> 5% in KR, defaults, not IE < 11',
        // CSS Grid 활성화 [false, 'autoplace', 'no-autoplace']
        autoprefixer: { grid: 'autoplace' },
      },
    ],
  ],
}