春ですね。^ ^
なにか新しいことをはじめたくなりますね。^ ^
前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。
今回は、webpackでPostCSSをつかえるようにします。
ゴールまでの道のり
- VPSサーバ借りる
- Ubuntu入れる
- Nginx入れる
- nodebrew、Node.js入れる
- nmp入れる
- git入れる
- Express入れる
- webpack入れる
- ES2015をES5に変換できるようにする ← 前回はここまで
- PostCSSをつかえるようにする ← 今回はここ!
- サイトつくる
今回のリポジトリ
https://github.com/kimizuka/webpack-sample-cssgithub.com
さてさて、もともとはサーバにRubyを入れずにCompassをつかうことを目的としていたはずなんですが、
webpackを導入したら、ついついJavaScriptの環境も整えたくなってしまい脱線してしまいました。
今回はCSSの環境を整えます。
もともとはCompassをつかうためにwebpackを入れたのですが、紆余曲折あってPostCSSをつかってみようと思います。
PostCSSとは
CSSを直接書くことがほとんどなくなってきた昨今に現れたCSSのフレームワークだそうです。
説明を読むに、みんな大好きAutoprefixer や、
まだサポートが十分でないCSS構文がつかえるようになったり(JavaScriptにおけるBabelみたいな感じ)するです。
もともとはCompassを使おうと僕ですが、
Autoprefixerは欲しいですし、
Compassでつかいたい機能といえば、
- ネスト
- 変数
- for文
- 継承
ぐらいなもんなので、PostCSSのプラグインですべてカバーできそうなので、
思い切ってCompassではなくPostCSSを使ってみることにしました。
(if文、mixinは迷いましたが過去5プロジェクトぐらい見返しても使ってなかったのでカット、逆にresetは毎回使ってましたが何処かから持ってくれば良いのでカット)
誰かの名言で、「顧客の欲しいのはドリルではない、壁に空いた穴だ」みたいなのがあったような無かったような気がしますが、
僕が欲しかったのも、「Compass」ではなく「ネスト」、「変数」、「for文」、「継承」だったわけなのでです。まったくもって語呂が悪いですが。
webpackのセットアップ
では今回もまっさらな状態で試してみます。
途中までは前回と全くもって一緒の工程です。
適当なディレクトリをつくって移動
mkdir webpack-sample-css
cd webpack-sample-css
ソース用のディレクトリと書き出し用のディレクトリをつくる
mkdir _src
mkdir _src/css
mkdir public
mkdir public/css
package.jsonつくる
npm init -y
webpackをインストール
npm install --save webpack
babelをインストール
npm install --save babel-core
npm install --save babel-preset-es2015
.babelrcにbabelのバージョンを記載
vim .babelrc
.babelrc
{ "presets": ["es2015"] }
コンフィグファイルをつくる
vim webpack.config.babel.js
webpack.config.babel.js
import ExtractTextPlugin from "extract-text-webpack-plugin"; // CSSファイルを書き出すのに必要 module.exports = [{ entry: { index: __dirname + "/_src/css/index.css" }, output: { path: __dirname + "/public/css/", filename: "[name].bundle.css" }, module: { rules: [{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader?minimize!postcss-loader" }) }] }, plugins: [ new ExtractTextPlugin("[name].bundle.css") ] }];
CSSのコンフィグファイルをつくる
vim postcss.config.js
postcss.config.js
module.exports = { plugins: [ require("postcss-simple-vars")({ silent: true }), require("postcss-nested"), require("postcss-for"), require("postcss-extend"), require("autoprefixer")({ browsers: ["last 5 versions"] }) ] };
必要なプラグインをインストール
npm install --save autoprefixer css-loader extract-text-webpack-plugin postcss-extend postcss-for postcss-loader postcss-nested postcss-simple-vars style-loader
_src/css/index.cssを用意
vim _src/css/index.css
_src/css/index.css
@charset "UTF-8"; $teal: #004D40; %bg-teal { background: $teal; } body { @extend %bg-teal; display: flex; @for $i from 0 to 10 { [data-index=$i] { &:after { content: "$i"; } } } }
無意味に変数、継承、プレフィックスが付きそうなプロパティ(flex)、ネスト、for文をもりこんでみました。
実行!
npm start
public/css/index.bundle.css
body{background:#004d40;display:-webkit-flex;display:-ms-flexbox;display:flex;content:"0";content:"1";content:"2";content:"3";content:"4";content:"5";content:"6";content:"7";content:"8";content:"9";content:"10"}
よさそう。
最終的なファイル構成
webpack-sample-css/
└ _src/
└ css/
└ index.css
└ nodemodules/
└ ...
└ ...
└ package.json
└ postcss.config.js
└ public/
└ css/
└ index.bundle.css
└ webpack.config.babel.js
リポジトリ
https://github.com/kimizuka/webpack-sample-cssgithub.com
こんな感じですね。
他にもプラグインがめっちゃあるので、いろいろやりたい人はどんどん入れてみると良いと思います。
ようやく、Ruby無しで「ネスト」、「変数」、「for文」、「継承」がつかえるようになったので、
次回はExpressのディレクトリ構成をいい感じに変更してサーバにアップしたいと思います。