sass loader에 postcss loader를 사용하는 도중, autoprefixer가 적용안되는 문제점이 있었다.
구버전의 경우에는 default로 webkit prefix를 붙여주었다고 하는데, 내가 쓰는 10버전은 아예 작동조차 하지않았다.
이 경우, browserslist를 정의해주면 작동이 되는 것을 확인 할 수 있다.
참고로 공식문서에서도 autoprefixers 는 브라우저 리스트를 사용한다고 한다. (설정안하면 작동이 안됨..)
먼저 webpack 설정을 살펴보자.
webpack.common.js
const postcssLoader = {
loader:'postcss-loader',
options:{
postcssOptions:{
config: path.resolve(__dirname, 'postcss.config.js'),
}
}
}
module.exports = {
// ... 중략
module:{
rules:[
test:/\.s?css$/,
use:[
//... css 관련 생략
postcssLoader,
{loader:'sass-loader'}
]
]
}
}
postcss.config.js 파일에서 postcss 플러그인 사용 정보들을 로드한다.
위에서 살펴본 것 처럼, webpack에서 이에 대한 파일을 커스텀하게 정할 수 있다.
이 글에서는 autoprefixer 플러그인을 사용하므로 이에 대한 설정을 알아보도록 한다.
postcss.config.js
module.exports = {
plugins:[
"autoprefixer"
]
}매우 간단하게 별 다른옵션이 없다면 플러그인 배열에 string 값만 적어주면 된다.
webpack의 loader와 사용법이 거의 똑같다.
여기까지 설정하였다면 autoprefixer를 사용할 준비를 끝마친 것이다.
그렇지만 browserslist를 설정하지 않았으므로 사용을 하진 못하는 것이므로
package.json에 browserslist를 설정해보도록 해보자.
browserslist에 대한 설정 값은 github에서 찾아볼 수 있다 (github.com/browserslist/browserslist)
package.json
{
//... 중략
"browserslist":[
"last 2 versions",
"IE 10",
"firefox > 20"
]
}여기서 지원하는 버전은 IE10, firefox 20버전 미만이다.
이렇게 설정하게 된다면 css에 vender prefix가 붙는 것을 확인 할 수 있다.
모두 설정함으로써 vender prefix가 붙은 것을 확인할 수 있다.