Webpackを使ってSassをビルドする

GulpからWebpackに変えてSassの環境作りに少し悩んだので備忘録です。
http://webpack.github.io/docs/stylesheets.html

手順

まずはWebpackとCSSをビルドするに必要なLoaderをインストールします。

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

合わせてExtra-Text-Webpack-Pluginというプラグインをインストールしておきます。

$ npm install --save-dev extract-text-webpack-plugin

このプラグインに関してはまだ掴みきれていない部分がありますが通常でビルドするとJavaScript内に組み込むのCSSが出力されます。
通常はlinkタグを使ってcssを読み込むことが多いと思いますのでその場合はこのプラグインを使ってCSSを出力します。

設定ファイル

webpack.config.jsにビルドに必要な情報を記述します。

webpack.config.js

var path = require('path'),
	ExtractTextPlugin = require('extract-text-webpack-plugin');
	
module.exports = [{
	context: path.join(__dirname, 'src/css'),
	entry: {
		style: './style.scss'
	},
	output: {
		path: path.join(__dirname, 'public/css'),
		filename: '[name].css'
	},
	module: {
		loaders: [
			{
				test: /\.scss$/,
				loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&minimize&sourceMap!sass-loader')
			}
		]
	},
	devtool: 'source-map',
	plugins: [
		new ExtractTextPlugin('[name].css')
	]
}];

気をつける箇所としてはmoduleのloader部分くらいです。
書き方がちょっと気になりますがstyle-loader、css-loader、sass-loaderを使用するという記述になります。
minimaizeはそのままですがcssファイルの圧縮、sourceMapもソースマップファイルを出力する設定です。sourceMapを使用する場合は、devtoolも合わせて設定しないと出力されませんので注意してください。
「-url」は記述間違いではありません。私もすこしハマってしまいましたがこれがないと背景画像等のイメージパスをcss-loaderがチェックします。最初はよくわかりませんでしたがurlの情報を除外すると見ると何となく納得いきます。

ビルド

あとはビルドするだけです。

$ webpack --watch --progress

webpackコマンドが使えない状況であればpackage.jsonを使用してビルドしてあげればいいと思います。

package.json

"scripts": {
	"watch": "webpack --watch --progress"
}

$ npm run watch

BourbonやCompassを使用する

とりあえず環境はできましたが私は作るものによってですがBourbonやCompassを使ってます。
このあたりの設定もメモしておきます。

Bourbon、Neatを使う

$ npm insall --save bourbon bourbon-neat

場合によってはBittersも仲間にいれてあげていいと思います。
直接cssフォルダ内に組み込む場合は特に必要はありませんがnpm installしたものをそのまま使う場合はwebpack.config.jsを修正する必要があります。

webpack.config.js

var bourbon = require('bourbon'),
	bourbonNeat = require('boubon-neat');
	

module.exports = [{
	...
	module: {
		...
	},
	sassLoader: {
		includePaths: bourbon.includePaths.concat(bourbonNeat.includePaths)
	},
	...
}]

あとはSassの方は今まで通り@import "bourbon"とかしてあげれば読み込めます。

Compassを使う

場合によってはCompassを使う場合もまだあるのでメモ。

$ npm install --save compass-mixins

webpack.config.js

module.exports = [{
	...
	module: {
		...
	},
	sassLoader: {
		includePaths: path.join(__dirname) + '/node_modules/compass-mixins/lib'
	},
	...
}]

BourbonみたいにincludePathsな記述ができなかったので直接パスを書いてしまってます。
他にいい方法があれば教えてください。