みかづきブログ その3

3ヶ月つづけてみました。

webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その5)

春ですね。^ ^

なにか新しいことをはじめたくなりますね。^ ^

前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。
今回は、webpackでPostCSSをつかえるようにします。

kimizuka.hatenablog.com

kimizuka.hatenablog.com

kimizuka.hatenablog.com

kimizuka.hatenablog.com




ゴールまでの道のり

  1. VPSサーバ借りる
  2. Ubuntu入れる
  3. Nginx入れる
  4. nodebrew、Node.js入れる
  5. nmp入れる
  6. git入れる
  7. Express入れる
  8. webpack入れる
  9. ES2015をES5に変換できるようにする ← 前回はここまで
  10. PostCSSをつかえるようにする ← 今回はここ!
  11. サイトつくる



今回のリポジトリ

github.com



さてさて、もともとはサーバにRubyを入れずにCompassをつかうことを目的としていたはずなんですが、
webpackを導入したら、ついついJavaScriptの環境も整えたくなってしまい脱線してしまいました。
今回はCSSの環境を整えます。
もともとはCompassをつかうためにwebpackを入れたのですが、紆余曲折あってPostCSSをつかってみようと思います。



PostCSSとは

CSSを直接書くことがほとんどなくなってきた昨今に現れたCSSのフレームワークだそうです。
説明を読むに、みんな大好きAutoprefixer や、
まだサポートが十分でないCSS構文がつかえるようになったり(JavaScriptにおけるBabelみたいな感じ)するです。

postcss.org
github.com

もともとはCompassを使おうと僕ですが、
Autoprefixerは欲しいですし、
Compassでつかいたい機能といえば、

  1. ネスト
  2. 変数
  3. for文
  4. 継承

ぐらいなもんなので、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



リポジトリ

github.com



こんな感じですね。
他にもプラグインがめっちゃあるので、いろいろやりたい人はどんどん入れてみると良いと思います。

postcss.parts

ようやく、Ruby無しで「ネスト」、「変数」、「for文」、「継承」がつかえるようになったので、
次回はExpressのディレクトリ構成をいい感じに変更してサーバにアップしたいと思います。