webpackを利用していて、スタイルはsassを利用しています。
現在は、head内にcssにコンパイルされたものが生成されているのですが、これを外部ファイル化したいと考えています。
しかし、1 JS 1CSSではなく、複数のsassをcssにコンパイルして、特定のディレクトリにCSSを外部ファイル化して生成する流れがわからず困っております。
ご教授ください。
ディレクトリ構成
- dist - bundle.js - index.html - webpack.config.js - src - resources - scss - base.scss - layout.scss
JavaScript
1const webpack = require('webpack'); 2const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3const extractCSS = new ExtractTextPlugin('[name].css'); 4 5module.exports = { 6 entry: { 7 html: './src/index.html', 8 js: './src/index.js', 9 }, 10 output: { 11 path: __dirname + '/dist', 12 filename: 'bundle.js', 13 }, 14 plugins: [ 15 extractCSS, 16 ], 17 module: { 18 preLoaders: [ 19 { test: /.jsx?$/, exclude: /node_modules/, loader: 'eslint-loader' }, 20 ], 21 loaders: [ 22 { 23 test: /.css$/, 24 loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), 25 }, 26 { 27 test: /.scss$/, 28 loader: ExtractTextPlugin.extract('style-loader', 29 'css-loader?sourceMap!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true'), 30 }, 31 { test: /.js?$/, exclude: /node_modules/, loader: 'babel-loader' }, 32 ], 33 }, 34}; 35
参考リンク
http://geta6.hatenablog.com/entry/2016/01/27/193413
http://qiita.com/nicchi__1985/items/e30e73de6d8443909537
http://webpack.github.io/docs/stylesheets.html#separate-css-bundle:embed
https://github.com/kgsi/webpack-example-sass/blob/master/webpack.config.js
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。