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

问题描述

问 题

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

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

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

解决方案

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

这篇关于css - webpack 打包 怎么把 sass 单独打包出来呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！