webpackでCSSをコンパイルしてみる&SassとPostCSSを使ってみる

webpackでいろいろやってみる続きです。

前回は開発用・本番用で書き出しコードを変えてみました。

webpackで開発時にソースマップを出したり本番用に圧縮する

現状だとCSSを使うことをやっていないので、スタイルが当てられないです。今回はCSSを使えるようにするのと、Sassを使うパターン、PostCSSを使うパターンを試してみます。

css-loaderとstyle-loaderを使う

まずはCSSをJSにコンパイルして、スタイルを当てられるようにします。

npm i css-loader style-loader -D

webpack.config.jsのloadersに追記します。

webpack.config.js

require('babel-polyfill');
const path = require('path');
const webpack = require("webpack");
var DEBUG = !process.argv.includes('--release');
console.log(DEBUG);
var plugins = [
  new webpack.optimize.OccurenceOrderPlugin()
];
if(!DEBUG){
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({ compress: { screw_ie8: true, warnings: false } }),
    new webpack.optimize.AggressiveMergingPlugin()
  );
}
module.exports = {
  entry: path.join(__dirname, 'src/app.js'),
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'public',
    port: 3000,
    inline: true
  },
  plugins: plugins,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      // ここを追記
      {
        test: /\.css$/,
        loader: 'style!css'
      }
    ]
  }
};

次にCSSファイルを作ります。今回はsrcディレクトリ以下にstyleディレクトリを作って、その中にapp.cssを作ってみます。

src/style/app.css

body {
  background: #888;
}

app.jsで読み込みます。

src/app.js

import React from 'react'
import { render } from 'react-dom'
// ここ追記
import styles from './style/app.css'
// 以下省略

最後に以下コマンドで画面を確認します。

npm start

sass-loaderを使う

次はSassを使えるようにしてみます。

追加で以下をインストールします。sass-loaderだけでいいのかなと思ったんですが、node-sassがないぞと怒られたので両方入れます。

npm i sass-loader node-sass -D

webpack.config.jsに追記します。

// 省略
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      // ここ追記
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }
    ]
  },
// 省略

先ほどのapp.cssをapp.scssに変更して以下のように書き換えてみます。

src/style/app.scss

body {
  background: #888;
  li {
    color: #fff;
  }
}

liタグがある場合の記述ですが、その辺は適当にやってください。

以下で確認します。

npm start

postcss-loaderを使う

いやいやSassよりPostCSSを使いたい派の人はこちら。

先ほどのsass-loaderなどの代わりにpostcss-loaderをインストールします。

npm i postcss-loader -D

webpack.config.jsを変更します。

webpack.config.js

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      // ここを変更
      // css!の後にpostcss
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      }
    ]
  },

PostCSSはこれだけでは動かないので、必要なプラグインをインストールします。ここでは試しに変数が使えるようになるpostcss-custom-propertiesとCSSの仕様でネストが使えるようになるpostcss-nestingを入れてみます。

npm i postcss-custom-properties postcss-nesting -D

webpack.config.jsに追記します。

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      }
    ]
  },
  // ここを追記
  postcss: [
    require('postcss-custom-properties')(),
    require('postcss-nesting')()
  ]

先ほどapp.scssにしていたものを再度app.cssに戻し、以下を記述します。

:root {
  --color: #fff;
}
body {
  background: #888;
  & li {
    color: var(--color);
  }
}

以下で確認

npm start

さいごに

今回はCSSを試しました。これで最低限のことはできるんじゃないかと思います。また何か新しいの使ってみたら追記していきます。

シリーズ記事

初めてでもできるwebpackとbabelを使ってみるまで
webpackでReact.jsとwebpack-dev-serverを使えるようにする
webpackで開発時にソースマップを出したり本番用に圧縮する
webpackでCSSをコンパイルしてみる&SassとPostCSSを使ってみる