概要

　ベンダープレフィックスをつけてくれる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],
}

参考文献

2016年から始めるCSS~環境構築編~