Pocket
LINEで送る

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}
Pocket
LINEで送る

カテゴリー: プログラミング

コメントください

関連記事

プログラミング

cakePHP2 – 多言語化

多言語化します。 cakephpマニュアルのこのページに説明が書いてあ 続きを読む …

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

%d人のブロガーが「いいね」をつけました。