カテゴリー別アーカイブ: postcss

webpack 2 で postcss を使う

前回の記事で webpack 2 を利用した SPA の開発環境の構築を記載しましたが, webpack 2 で postcss を導入してみたいと思います.

1. Install postcss

npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

2. Create webpack.config.js

const webpack           = require('webpack');
const ExtrackTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/main.js', './src/main.css'],
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtrackTextPlugin.extract({
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-easy-import')({ glob: true })
        ]
      }
    }),
    new ExtrackTextPlugin('app.css')
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示している記述が, 1.x からの大きな変更点です. 1.x では, 以下のように記述していました (していたそうです …)

// ...
entry : {
  js: './src/main.js',
  css: './src/main.css'
},
//

webpack 2 で 1.x の記述をしてしまうと, 以下のようなエラーが発生してしまいます.

ERROR in chunk css [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js

3. src/main.css

@charset "UTF-8";

@import "./styles/base.css";
@import "./components/**/*.css";

npm でインストールした postcss-easy-import プラグインで Sass のような, CSS のインポートが可能になります.

4. src/styles/base.css

:root {
    --base-color: #ff1493;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--base-color);
}

こちらも同様に, Sass のような CSS 変数の利用が可能になります.

以上で, webpack 2 を利用したCSS のビルド環境も構築できました.
あとは,

$ npm run build

を実行すると, public/app.css が生成されます. また, JavaScript ファイルと同様, 変更して保存すると, ブラウザが自動でリロードされます.

参考