Edited at

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

More than 3 years have passed since last update.


使用するSyntax

PostCSSを使用することで、W3C標準や独自定義など、様々なSyntaxに対応できるようにします。


PostCSS


  • 公式サイト

  • jsでいうところのbabelのようなものです(cssが付いているからややこしい・・やっぱbabelって神だな・・)

  • 本体はcssファイルを読み込んでAST(Abstract Syntax Tree)を作成するだけです

  • ASTからのtransformはPluginが実行します

  • transformの書き出し(stringify)はPostCSSが実行します

  • codeはbabelよりも読みやすいです :thumbsup:

  • cssのsyntaxの一種ではないです

  • syntaxを定義するのはPluginの方でやります


環境構築

webpackを使用します。基本的な使用方法は前提となっています。


install

$ npm install --save-dev postcss-loader

# browser-vendor個々のprefixを設定するautoprefixerと
# sassのような記法が使えるprecssのpluginもインストールします
$ npm install --save-dev autoprefixer precss


webpack.config.jsを編集します


webpack.config.js

'use strict';

var webpack = require('webpack');
var path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');

var env = process.env.NODE_ENV;
var config = {
module: {
loaders: [
...,

{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},

...,
]
},
...,

postcss: function() {
return [autoprefixer, precss];
}
};

module.exports = config;


参考: https://github.com/postcss/postcss-loader

参考: https://github.com/jonathantneal/precss (postcss-scssをインストールすると書いてあるが、実際なしでも動く)

buildすれば正常に動作します。

これだけだとただscssをビルドしているだけ(それでも便利)ですが、pluginを使用すれば色々なsyntaxが利用できるようになります。

pluginを作れば自分だけのsyntaxを定義することも可能です。

PostCSS Plugin使用編に続く・・・(完)