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 の中身を以下のように書いておきます。
$color: #ccc;
body {
color: $color;
header {
color: #fff;
}
}
webpack の設定ファイルを作成する
webpack を利用してコンパイルするために、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
body {
color: #ccc; }
body header {
color: #fff; }
その他
出力ファイルをフォルダ分けする
出力ファイルを別のフォルダにする場合は、entry の左側をフォルダ階層にします。
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 パラメータを指定します。
loader: ExtractTestPlugin.extract({
fallback: 'style-loader',
// use: 'css-loader!sass-loader'
use: 'css-loader&minimize!sass-loader'
})