概要
ベンダープレフィックスをつけてくれるAutoprefixerを使いたかったところ、PostCSSが必要でsass-loaderからの移行メモ。
インストール
sudo npm i --save-dev postcss-loader sugarss precss autoprefixer
- postcss-loader
- PostCSS本体
- sugarss
- Sass記述をCSSに変換
- precss
- $を使った変数の変換
- autoprefixer
- '-webkit-'や'-moz-'などのブラウザ独自拡張の識別子を自動で付与する
設定
使用するプラグインは読み込みます。
import autoprefixer from 'autoprefixer';
import precss from 'precss';
sugarssはpostcssのloaderにパラメータとして付与し、autoprefixerとprecssはpostcssをkeyに配列で定義します。
autoprefixerには、ブラウザのバージョンを引数に渡すことで対応したプレフィックスを付与します。
{
module: {
loaders: [
{
test: /\.sass$/,
loaders: ['style', 'css', 'postcss?parser=sugarss'],
},
],
},
postcss: [autoprefixer({ browsers: ['IE 9', 'IE 10', 'IE 11', 'last 2 versions'] }), precss],
}