webpack を利用して sass(scss) をコンパイルする

はじめに

webpack を利用して sass(scss) をコンパイルします。

注意事項

コマンドプロンプトから npm を実行するために、node.js がインストールされている必要があります。

環境

OS : Windows 7 Pro 64bit
その他 : npm 3.10.10, webpack 2.2.1

sass(scss) とは

sass とは、Syntactically Awesome Style Sheets の略で、成熟した、安定した、プロフェッショナルなグレードの css 拡張言語です。
変数、ネストされたルール、ミックスイン、インラインインポートなどを完全に css 互換の構文で使用することができます。

sassには2つの構文がありそれぞれ拡張子がscssとsassとなっています。

scss 構文

scss は、css の構文を拡張したもので、括弧やセミコロンを使用します。

$color: #ccc;

body {
  color: $color;
}

sass 構文

sass は、より簡潔な css の記述で、セレクタのネストを示すために括弧ではなく字下げを使用し、セミコロンではなく改行を使用してプロパティを分離します。

$color; #ccc

body
  color: $color

環境の作成

webpack を利用して、sass をコンパイルするための環境を作成します。

package.json を作成する

以下のコマンドを入力して、package.json を作成します。

> npm init

webpack をインストールする

webpack コマンドを利用するために、webpack をグローバルにインストールします。

> npm install -g webpack

必要なモジュールをインストールする

scss をコンパイルするためのモジュールをインストールします。

> npm install --save-dev css-loader style-loader sass-loader node-sass webpack

css-loader : css を利用するためのモジュールです。
style-loader : DOM に <style> タグを挿入するためのモジュールです。css-loader と組み合わせるよう推奨されています。
sass-loader : sass を css にコンパイルするためのモジュールです。
node-sass : node.js で sass をコンパイルするためのモジュールです。

css のファイルを作成するために、ExtractTextPlugin をインストールします。webpack のバージョンが 2 以上の場合、普通にインストールすると、依存関係がエラーとなってしまうため、現状で最新のバージョン (v2.0.0-rc.3) をインストールします。

> npm install --save-dev extract-text-webpack-plugin@v2.0.0-rc.3

sass ファイルを作成する

ファイルを作成する前にフォルダ構成を以下のようにします。/src/scss フォルダに、コンパイル前の scss ファイルを入れておき、コンパイルしたものを /public/css フォルダに出力していきます。

root
  ┣ public
  ┃   ┗ css
  ┣ src
  ┃   ┗ scss
  ┃       ┗ index.scss
  ┗ package.json

index.scss の中身を以下のように書いておきます。

index.scss
$color: #ccc;

body {
  color: $color;

  header {
    color: #fff;
  }
}

webpack の設定ファイルを作成する

webpack を利用してコンパイルするために、webpack.config.js を作成し、中身を以下のように記述します。

webpack.config.js
const path = require('path');
const ExtractTestPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        index: './src/scss/index.scss'
    },
    output: {
        path: path.join(__dirname, 'public/css'),
        filename: '[name].css'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTestPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTestPlugin('[name].css')
    ]
};

webpack でコンパイルを実行する

以下のコマンドを入力して、sass のコンパイルを行ないます。

> webpack

public の css フォルダ内に index.css のファイルが作成されます。

root
    ┣ public
    ┃   ┗ css
+   ┃       ┗ index.css
    ┣ src
    ┃   ┗ scss
    ┃       ┗ index.scss
    ┣ package.json
    ┗ webpack.config.js

index.css
body {
  color: #ccc; }
  body header {
    color: #fff; }

その他

出力ファイルをフォルダ分けする

出力ファイルを別のフォルダにする場合は、entry の左側をフォルダ階層にします。

webpack.config.js
     entry: {
        index: './src/scss/index.scss',
        'user/index': './src/scss/user/index.scss'
     },

以下のように別フォルダに css が作成されます。

root
    ┣ public
    ┃   ┗ css
+   ┃       ┣ user
+   ┃       ┃   ┗ index.css
    ┃       ┗ index.css
    ┣ src
    ┃   ┗ scss
    ┃       ┣ user
    ┃       ┃   ┗ index.scss
    ┃       ┗ index.scss
    ┣ package.json
    ┗ webpack.config.js

css を圧縮する

css を圧縮する場合は、css-loader に minimize パラメータを指定します。

webpack.config.js
    loader: ExtractTestPlugin.extract({
        fallback: 'style-loader',
//      use: 'css-loader!sass-loader'
        use: 'css-loader&minimize!sass-loader'
      })