webpack打包 我如果想把css单独打出来的话 是用插件这样的
{test: /.css$/, loader: ExtractTextPlugin.extract("style", "css")}
但是呢 如果我想把 用sass编写的样式也打包 转换成css 的时候也是单独的一个css 文件 ,应该怎样写配置呢?
基本一致
{
test: /.sass$/,
loader: ExtractTextPlugin.extract('style', 'css', 'sass')
}
记得装sass-loader
就好
1.首先引入extract-text-webpack-plugin
和sass-loader
npm install --save-dev extract-text-webpack-plugin sass-loader
var ExtractTextPlugin = require('extract-text-webpack-plugin');
2.编写loaders
{
test: /.sass$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
需要知道的是,ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左,即先对引入的 .sass
使用 sass loader
得到编译后的 css 再使用 css-loader
按照正常 css-loader
的方式处理。
可以参考我开源的一个基本配置:https://github.com/guox191/React-mobile-example/blob/master/webpack.config.js