PostCSS

PostCSSは、高速にCSSをごにょごにょできるツール。プラグインが沢山あって色々なことができる。

postcss/postcss PostCSS とは何か by Yoshihide Jimbo PostCSS まとめ Webpack2でpostcssを使う postcss/postcss-loader

プラグインは下記を使ってみることにした。 autoprefixer cssnano precss react-css-modules

webpack2で使ってみる

$ npm install --save-dev postcss postcss-loader autoprefixer cssnano precss react-css-modules

postcss.coonfig.js

module.exports = {
  plugins: [
    require('autoprefixer')({}),
    require('cssnano')({}),
    require('precss')({}),
    require('react-css-modules')({}),
  ]
}

webpack.config.js

var path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            'css-loader',
            'postcss-loader'
          ],
        })
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['es2015', {modules: false}]],
            plugins: ['syntax-dynamic-import']
          }
        }]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    })
  ]
};

hoge.css

$blue: #09c;
body{
    background:black;
    color:white;
}
h1{
    color:$blue;
    display: flex;
}
.hoge{
    color:red;
}

$ webpack

style.css

body{background:#000;color:#fff}h1{color:#09c;display:-webkit-box;display:-ms-flexbox;display:flex}.hoge{color:red}