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