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' },
},
],
],
}
PostCSS Short 플러그인
PostCSS Short은 CSS를 작성하는 속도를 향상시켜주는 유용한 PostCSS 플러그인입니다. postcss-short 패키지를 프로젝트에 설치한 후, PostCSS 구성 파일 안에 플러그인을 설정합니다.
npm i postcss-short -D
참고
Last updated
Was this helpful?