Webpackを使って、Sassをコンパイルする方法 2017年4月版

はじめに

Webpackを使って、Sassをコンパイルする方法です。
Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、
実際に動いた例を示しておきます。

末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。

コンパイル環境構築

[bash]
$ mkdir test-saas
$ cd test-saas
$ npm init -y
$ npm install webpack extract-text-webpack-plugin css-loader sass-loader style-loader node-sass –save-dev
[/bash]

こんな感じのフォルダツリーにsassがあると仮定します。

webpack.configの調整

ルートフォルダに webpack.config.jsを以下のような内容で作成します。
目標は sassフォルダにある app.scssとsub.scssを dist/cssフォルダにapp.cssとsub.cssとして出力する。

[bash]
var path = require(‘path’);
var webpack = require(‘webpack’);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
devtool: ‘source-map’,
entry: {
app: ‘./sass/app.scss’,
sub: ‘./sass/sub.scss’
},
output: {
path: path.join(__dirname, ‘./dist/css’),
filename: ‘[name].css’
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(‘css-loader!sass-loader’)
}
]
},
plugins: [
new ExtractTextPlugin(‘[name].css’)
],
}
[/bash]

動作環境（各モジュールのバージョン）

2017年4月現在で動いたのは以下のバージョンです。

[bash]
“devDependencies”: {
“css-loader”: “^0.28.0”,
“extract-text-webpack-plugin”: “^2.1.0”,
“node-sass”: “^4.5.2”,
“sass-loader”: “^6.0.3”,
“style-loader”: “^0.16.1”,
“webpack”: “^2.4.1”,
}
[/bash]

コンパイル

[bash]
./node_modules/.bin/webpack
[/bash]

こんな感じにファイルができていれば成功です。

あとがき

sassだけをコンパイルしたいケースは少ないと思いますが、Reactなんかでアプリを作り
同時にsassもコンパイルしたいケースなんかに webpack.config.js をどう設定するかという
ことで悩んだりしますよね。

ES6とかとのコンパイルと組み合わせたい場合は、

[bash]
module.exports = {
ごにょごにょ
}
[/bash]

の部分を配列定義に変えてやって、

[bash]
module.exports = [
{
ごにょごにょ
},
{
ごにょごにょ
},
]
[/bash]

としてやってください。

Reactで ES6をノーマルなJavaScriptに変換するときの webpack.config.jsの設定は
こちらの記事を参考にしてみてください。