SASSをwebpackでコンパイルした時の設定メモ

SASSをwebpackを使ってコンパイルしたときの設定メモです。

npmモジュールのインストール

モジュールはこれだけ必要でした。

SASSのファイルは、node-sass -> sass-loader -> css-loader -> style-loader と渡されてCSSとなり、extract-text-webpack-pluginで、ファイルとして切り出しを行うようです。

npm init
npm install --save-dev webpack webpack-dev-server 
npm install --save-dev node-sass style-loader css-loader sass-loader
npm install --save-dev extract-text-webpack-plugin

webpack.jsの記述

エントリーポイントは src/css/index.scss、出力先は、dist/css/app.css としました。
includePaths[]を指定することで、node_module以下にあるsassもimportできるようにしています。

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 略
module.exports = [
  {
    // 略
  },
  {
    context: __dirname + '/src/css',
    entry: {
      app: './index.scss'
    },
    output: {
      path: __dirname + '/dist/css',
      filename: './[name].css'
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ('css-loader?-url&minimize&sourceMap!sass-loader?outputStyle=expanded&' +
               'includePaths[]=' + path.resolve(__dirname, './node_modules'))
          })
        }
      ]
    },
    devtool: 'source-map',
    plugins: [
      new ExtractTextPlugin('./[name].css')
    ]
  }
];

下記参考にさせていただきました。
http://qiita.com/yaaah93/items/f8293846134efc83634a
http://qiita.com/nicchi__1985/items/e30e73de6d8443909537