在webpack 5中配置dart sass以提取独立css文件，核心在于使用 sass-loader 配合 css-loader 和 minicssextractplugin。通过安装这些依赖并在 module.rules 中正确设置加载器链，webpack会将sass编译为css并打包进单独的文件中，而不是注入到js里。
如何安装必要的依赖包
要实现上述功能，必须安装三个关键包：sass（即Dart Sass）、css-loader 和 mini-css-extract-plugin。推荐使用npm或yarn进行安装，确保版本兼容Webpack 5。
npm install sass css-loader mini-css-extract-plugin --save-dev
安装完成后，需要在Webpack配置文件中引入 MiniCssExtractPlugin，并定义一个新的插件实例。这个插件负责将CSS从bundle中提取出来，生成独立的.css文件。
立即学习“前端免费学习笔记（深入）”；
如何在webpack.config.js中配置loader链
在 module.rules 数组中添加一条新规则，匹配所有 .scss 或 .sass 文件。加载器的执行顺序是从右到左，因此需要先使用 sass-loader 将Sass代码编译为CSS，再使用 css-loader 解析CSS中的 @import 和 url()，最后由 MiniCssExtractPlugin.loader 将结果输出为文件。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ...其他配置
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
};
这样配置后，当运行Webpack构建时，所有的Sass样式都会被提取到一个或多个独立的CSS文件中，便于浏览器缓存和性能优化。
如何处理Sass文件中的变量和导入
在使用Dart Sass时，可以利用其强大的变量和混合功能。例如，可以在一个单独的 _variables.scss 文件中定义全局变量，然后在主样式文件中通过 @import 或 @use 引入。Webpack的 sass-loader 会自动处理这些依赖关系，确保所有需要的样式都被正确编译和提取。
