PostCSS 로더

PostCSS Loader 구성

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

패키지 설치

npm i postcss postcss-loader -D

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader' /* 로더 설정 */]
      }
    ]
  }
}

postcss.config.js

module.exports = {
  // PostCSS 플러그인 설정
  plugins: []
}

PostCSS Preset Env 플러그인

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

패키지 설치

npm i postcss-preset-env -D

postcss.config.js

module.exports = {
  plugins: [
    [
      'postcss-preset-env', 
      // 플러그인 옵션 설정
      { browsers: '> 5% in KR, defaults, not IE < 11' }
    ]
  ]
}

Autoprefixer 플러그인

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

postcss.config.js

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

PostCSS Short 플러그인

PostCSS Short은 CSS를 작성하는 속도를 향상시켜주는 유용한 PostCSS 플러그인입니다. postcss-short 패키지를 프로젝트에 설치한 후, PostCSS 구성 파일 안에 플러그인을 설정합니다.

패키지 설치

npm i postcss-short -D

postcss.config.js

module.exports = {
  plugins: [
    ['postcss-short', { prefix: 'x', skip: '-' }],
    // ...
  ]
}

PostCSS Short 플러그인의 자세한 사용법은 Smashing Magazine에 게시된 글을 참고하세요.

참고

postcss-loader | webpackwebpack

PostCSS - a tool for transforming CSS with JavaScriptpostcss