PostCSS 로더
PostCSS Loader 구성
postcss, postcss-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정합니다. 그리고 PostCSS 구성 파일 postcss.config.js 파일을 프로젝트 루트에 생성하고 설정 코드를 작성합니다.
npm i postcss postcss-loader -Dmodule.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader' /* 로더 설정 */]
}
]
}
}module.exports = {
// PostCSS 플러그인 설정
plugins: []
}PostCSS Preset Env 플러그인
postcss-preset-env 패키지를 프로젝트에 설치한 후, PostCSS 구성 파일 안에 플러그인을 설정합니다.
npm i postcss-preset-env -Dmodule.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 구성 파일 플러그인 항목을 다음과 같이 수정합니다.
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 -Dmodule.exports = {
plugins: [
['postcss-short', { prefix: 'x', skip: '-' }],
// ...
]
}참고
Last updated
Was this helpful?