webpack 打包 怎么把 sass 单独打包出来呢?

Question

webpack打包 我如果想把css单独打出来的话 是用插件这样的

{test: /.css$/, loader: ExtractTextPlugin.extract("style", "css")}

但是呢 如果我想把 用sass编写的样式也打包 转换成css 的时候也是单独的一个css 文件 ,应该怎样写配置呢?

Answer 1

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

Answer 2

基本一致

{
    test: /.sass$/,
    loader: ExtractTextPlugin.extract('style', 'css', 'sass')
}

记得装sass-loader就好