使用 webpack 处理 Sass、Less 文件
作者：Seiya
时间：2019年07月10日
准备
这次我们需要用到 sass-loader、less-loader 等 LOADER，如下所示：
sass-loader：加载器，将 Sass 文件转换成 cssless-loader：加载器，将 Less 文件转换成 css
然后，我们编写 base.scss 文件（这里我们仅取 Sass 的例子，Less 同理），代码如下：
$bgColor: red !default;
*,
body {
margin: 0;
padding: 0;
}
html {
background-color: $bgColor;
}
编译打包 scss 文件
首先，在入口文件 app.js 中引入我们的 scss 样式文件：
import './scss/base.scss';
下面，开始编写 webpack.config.js 文件：
...
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
},
{
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
},
{
loader: "sass-loader" // 将 Sass 编译成 CSS（如果是 Less，则使用 less-loader）
}
]
}
]
}
注意：
module.rules.use 数组中，loader 的位置。根据 webpack 规则：放在最后的 loader 首先被执行。所以，首先应该利用 sass-loader 将 scss 编译为 css，剩下的配置和处理 css 文件相同。
提取和懒加载
为了实现 SCSS 懒加载，我们需要借助 extract-text-webpack-plugin 这个插件，其余配置和上面的配置一样。
注意：
在安装插件的时候，应该安装针对 v4 版本的 extract-text-webpack-plugin。
然后，我们新增一个 common.scss 文件，如下所示：
// 覆盖原来颜色：green
html {
background-color: green !important;
}
使用 ExtractTextPlugin
使用 extract-text-webpack-plugin，需要在 webpack.config.js 的 plugins 选项和 rules 中 scss 的相关选项进行配置：
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: __dirname + '/dist/',
chunkFilename: '[name].chunk.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
/* 当不提取时，使用 style-loader 将样式加载到页面中 */
fallback: {
loader: 'style-loader'
},
/* 当提取时，使用 sass-loader 和 css-loader 进行处理*/
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{
loader: 'sass-loader'
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name].min.css', // 提取的文件名
allChunks: false // 指定 css 文件提取范围（true 表示提取所有 import 的文件，false 表示不提取异步加载的文件）
})
]
};
注意：
注意一：fallback 配置项，针对不提取为单独 css 文件的 scss 样式应该使用的 LOADER。即使用 style-loader 将 scss 处理成 css 嵌入网页代码。
注意二：allChunks 必须指明为 false。否则会包括异步加载的 CSS！
SCSS 引用和懒加载
在项目入口文件 app.js 中，针对 scss 懒加载，需要引入以下配置代码：
import 'style-loader/lib/addStyles';
import 'css-loader/lib/css-base';
剩下我们先设置背景色为红色，在用户点击鼠标后，懒加载 common.scss，使背景色变为绿色。剩余代码如下：
import './scss/base.scss';
var loaded = false;
window.addEventListener('click', function() {
if (!loaded) {
import(/* webpackChunkName: 'style'*/ './scss/common.scss').then(_ => {
// chunk-name : style
console.log('Change bg-color of html');
loaded = true;
});
}
});
最后，我们需要在 html 代码中引入打包结果中的、非懒加载的样式 (/dist/app.min.css) 和 js 文件 (/dist/app.bundle.js)。
我们可以看到，点击页面后会加载 common.scss 文件中的样式，懒加载成功。