,

[webpack] webpack 2 入門: postcss-loader で PostCSS plugin を利用する

公開日: 2017/06/08
更新日: 2018/10/03

autoprefixer と cssnano を追加します。

ここでは PostCSS そのものについては触れず、postcss-loader の組み込みについてフォーカスします。

Contents

Installation

postcss-loader をインストールします。

% yarn add --dev postcss-loader

PostCSS のプラグインをインストールします。

% yarn add --dev autoprefixer cssnano

webpack.config.js

postcss-loader を追加します。
css-loader の前で読み込みます。

webpack.config.js
module.exports = {
    :
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {sourceMap: true},
            },
            {
              loader: 'postcss-loader',
              options: {sourceMap: true},
            },
            {
              loader: 'sass-loader',
              options: {sourceMap: true},
            },
          ],
        }),
      },
    :

Usage

Browserslist の設定を package.json に追加します。

package.json
    :
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "ie >= 9"
  ],
    :

webpack コマンドを実行します。

% $(yarn bin)/webpack

Chrome Devtool や生成されたファイルを見ると、ベンダープレフィックスが自動で追加されていることが確認できました。

dist/stylesheets/style.css
.slick-next,.slick-prev {
    -webkit-transition-duration: 1s;
    transition-duration: 1s
}
.slick-next:hover,.slick-prev:hover {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

補遺

PostCSS について。

Browserslist について。

css-loader の importLoaders オプションについては、いまいち理解できておりません。