Help us understand the problem. What is going on with this article?

webpackでPostCSSのポの字からはじめてみる

More than 1 year has passed since last update.

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

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

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の作成

ファイル構成

スクリーンショット 2017-11-21 13.17.02.png

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ファイルをビルドする環境が整いました。ここから実用に向けて少しずつ機能を足していきます:thumbsup:

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

作業フォルダー内の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
}

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

インストール

  • 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情報を追えてなかったのでこれからちょこちょこアンテナ尖らせたいと思いました:thinking:

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした