作成日:2017/02/08更新日:2018/09/25webタグ：sassscsswebpack

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 の構文を拡張したもので、括弧やセミコロンを使用します。

1$color: #ccc;
2
3body {
4  color: $color;
5}

sass 構文

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

1$color: #ccc
2
3body
4  color: $color

環境の作成

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

package.json を作成する

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

1> npm init

webpack をインストールする

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

1> npm install -g webpack

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

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

1> 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) をインストールします。

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

sass ファイルを作成する

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

1root
2  ┣ public
3  ┃   ┗ css
4  ┣ src
5  ┃   ┗ scss
6  ┃       ┗ index.scss
7  ┗ package.json

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

index.scss
1$color: #ccc;
2
3body {
4  color: $color;
5
6  header {
7    color: #fff;
8  }
9}

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

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

webpack.config.js
1const path = require('path');
2const ExtractTestPlugin = require('extract-text-webpack-plugin');
3
4module.exports = {
5    entry: {
6        index: './src/scss/index.scss'
7    },
8    output: {
9        path: path.join(__dirname, 'public/css'),
10        filename: '[name].css'
11    },
12    module: {
13        loaders: [
14            {
15                test: /\.scss$/,
16                loader: ExtractTestPlugin.extract({
17                    fallback: 'style-loader',
18                    use: 'css-loader!sass-loader'
19                })
20            }
21        ]
22    },
23    plugins: [
24        new ExtractTestPlugin('[name].css')
25    ]
26};

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

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

1> webpack

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

1root
2    ┣ public
3    ┃   ┗ css
4+   ┃       ┗ index.css
5    ┣ src
6    ┃   ┗ scss
7    ┃       ┗ index.scss
8    ┣ package.json
9    ┗ webpack.config.js

index.css
1body {
2  color: #ccc; }
3  body header {
4    color: #fff; }

その他

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

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

webpack.config.js
1     entry: {
2        index: './src/scss/index.scss',
3        'user/index': './src/scss/user/index.scss'
4     },

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

1root
2    ┣ public
3    ┃   ┗ css
4+   ┃       ┣ user
5+   ┃       ┃   ┗ index.css
6    ┃       ┗ index.css
7    ┣ src
8    ┃   ┗ scss
9    ┃       ┣ user
10    ┃       ┃   ┗ index.scss
11    ┃       ┗ index.scss
12    ┣ package.json
13    ┗ webpack.config.js

css を圧縮する

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

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