いまいちCSS界の波に乗れておらず今更感あるかもしれませんが、webpackでPostCSSを始めるときに最小限で手頃な情報がなかったので備忘録ということでまとめておきます

※間違っているところ、無駄なところがあったら教えてください

webpack & PostCSSの最小限の環境を構築する

インストール

webpack(v3.8.1)
postcss(v6.0.14)
css-loader(v0.28.7)
postcss-loader(v2.0.8)
style-loader(0.19.0)

※2017/11/20時点

コマンド

npm i -D webpack postcss css-loader postcss-loader style-loader

webpack.config.jsの作成

ファイル構成

webpack.config.js

webpack.config.js

const path = require('path')

const outputDirPath = path.resolve(__dirname, 'build/js');

module.exports = {
  entry: {
    entry: ['./src/index.js'],
  },

  output: {
    path: outputDirPath,
    filename: 'index.js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

CSSをimportするjsファイルを作成

index.js

import './index.css'

スタイルを記述するsrc/index.cssをimportします。

実行

npm run webpack

実行するとsrc/index.cssのスタイルがsrc/index.jsにimportされ、build/js/index.jsとして書き出されます。

これでwebpackとPostCSSでCSSファイルをビルドする環境が整いました。ここから実用に向けて少しずつ機能を足していきます

ローカルにサーバーを立ててライブリロード

作業フォルダー内のCSSが更新されたら自動でブラウザが更新されるように設定します。webpack-dev-serverを使います。

インストール

webpack-dev-server(v2.9.4)

※先に「webpack & PostCSSの最小限の環境を構築する」を実行してください。
※2017/11/20時点

コマンド

npm i -D webpack-dev-server

package.jsonの編集

scriptsに実行するタスクを追加

build
ビルドタスク
start
ローカルサーバーを立て、ファイルが更新されたかどうかを監視するタスク。

package.json

{
  "name": "postcss-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "postcss": "^6.0.14",
    "postcss-loader": "^2.0.8",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

webpack.config.jsの編集

webpack.config.js

const path = require('path')

const outputDirPath = path.resolve(__dirname, 'build/', 'js');

module.exports = {
  entry: {
    entry: ['./src/index.js'],
  },

  output: {
    path: outputDirPath,
    filename: 'index.js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
          }
        ]
      }
    ]
  },

  // 追加
  devServer: {
    // サーバーで表示するディレクトリ
    contentBase: path.join(__dirname, "build"),
    // ビルドしたbundle.jsをhttp://localhost:8080/js/bundle.jsで参照できるように
    // ライブリロードが可能になる
    publicPath: '/js/',
    // contentBase以下のwebpackで管理していないファイルの更新でもリロードするように
    watchContentBase: true
  }
};

実行

startの前にbuildを実行してビルド後のファイルを用意しておく。

npm run build
npm run start

Autoprefixerを導入

Autoprefixerとは、

適応前

a {
    display: flex;
}

が

適応後

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

のようにベンダープレフィックスを自動で流し込んでくれる。便利

インストール

autoprefixer(v7.1.6)

※先に「webpack & PostCSSの最小限の環境を構築する」を実行してください。
※2017/11/20時点

コマンド

npm i -D autoprefixer

webpack.config.jsの編集

webpack.config.js

const path = require('path')
const autoprefixer = require('autoprefixer');

const outputDirPath = path.resolve(__dirname, 'build/', 'js');

module.exports = {
  entry: {
    entry: ['./src/index.js'],
  },

  output: {
    path: outputDirPath,
    filename: 'index.js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          // 変更
          {
            loader: 'postcss-loader',
            options: {
              plugins: ()=>[
                autoprefixer
              ]
            }
          }
        ]
      }
    ]
  },

  devServer: {
    // サーバーで表示するディレクトリ
    contentBase: path.join(__dirname, "build"),
    // ビルドしたbundle.jsをhttp://localhost:8080/js/bundle.jsで参照できるように
    // ライブリロードが可能になる
    publicPath: '/js/',
    // contentBase以下のwebpackで管理していないファイルの更新でもリロードするように
    watchContentBase: true
  }
};

実行

ローカルサーバーが立ち上がり、CSSを更新したら自動でベンダープレフィックスを流し込んでくれる。

npm run start

cssnextにある新しいCSS仕様を導入

nextcssでは、新しいCSS仕様を使えるようにするPostCSSのプラグインが紹介されています。その中で気になったものを自分の環境に導入してみます。ここでは、custom media queriesを導入してみます。他の仕様も同様の方法で追加できるので、試してみてください。

プラグイン名はcustom media queriesにあるPlugin documentationで調べられます。

インストール

postcss-custom-media(v6.0.14)

※先に「webpack & PostCSSの最小限の環境を構築する」を実行してください。
※2017/11/20時点

コマンド

npm i -D postcss-custom-media

webpack.config.jsの編集

webpack.config.js

const path = require('path')
const autoprefixer = require('autoprefixer');
const customMedia = require("postcss-custom-media");

const outputDirPath = path.resolve(__dirname, 'build/', 'js');

module.exports = {
  entry: {
    entry: ['./src/index.js'],
  },

  output: {
    path: outputDirPath,
    filename: 'index.js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: ()=>[
                autoprefixer,
                // 追加
                customMedia
              ]
            }
          }
        ]
      }
    ]
  },

  devServer: {
    // サーバーで表示するディレクトリ
    contentBase: path.join(__dirname, "build"),
    // ビルドしたbundle.jsをhttp://localhost:8080/js/bundle.jsで参照できるように
    // ライブリロードが可能になる
    publicPath: '/js/',
    // contentBase以下のwebpackで管理していないファイルの更新でもリロードするように
    watchContentBase: true
  }
};

実行

npm run start

まとめ

昔に比べてCSSって便利になってるんですね。あまりCSS情報を追えてなかったのでこれからちょこちょこアンテナ尖らせたいと思いました

僕だけかもしれないのですが、プロジェクトの中盤以降はwebpack.config.jsを触らなくなって書き方をよく忘れるので、数カ月後の自分に役立てばいいな

バージョンが上がると動かなくなるのかな...