直接配 sass-loader 会报错，因为它只将 Sass 编译为 CSS 字符串，而 Webpack 默认不识别 CSS，必须链式配合 css-loader（解析 @import/url）和 style-loader（注入 head）或 MiniCssExtractPlugin.loader（提取文件）才能正常工作。
为什么直接配 sass-loader 会报错
因为 sass-loader 只负责把 .scss 或 .sass 编译成 CSS 字符串，它不处理后续的 CSS 解析、注入或提取。Webpack 默认不认识 CSS，所以必须链式配合其他 loader 才能跑通。
常见错误信息：Module parse failed: Unexpected token 或 You may need an appropriate loader，本质就是缺少 css-loader 或 style-loader。
-
sass-loader→ 把 Sass 源码转成 CSS 字符串 -
css-loader→ 把 CSS 字符串转成 JS 模块（支持@import、url()等） -
style-loader→ 把 CSS 模块动态插入（开发用） -
MiniCssExtractPlugin.loader→ 把 CSS 提取成独立文件（生产用）
sass-loader 的最小可用配置（开发环境）
先装依赖：
npm install sass-loader sass css-loader style-loader -D
在 webpack.config.js 的 module.rules 中添加：
立即学习“前端免费学习笔记（深入）”；
rules: [
{
test: /\.(scss|sass)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
注意顺序不能错：loader 执行方向是「从右到左」，也就是先 sass-loader，再 css-loader，最后 style-loader。
- 如果只写
use: ['sass-loader']，Webpack 会卡在 CSS 字符串无法解析这一步 - 如果漏掉
css-loader，@import和图片路径（如url(./img.png)）会失效 -
sass包（Dart Sass）必须安装，否则sass-loader启动就报Cannot find module 'sass'
生产环境要换掉 style-loader
打包时把样式内联进 JS 不利于缓存，也违反分离关注点原则。得用 mini-css-extract-plugin 提取成单独 CSS 文件。
安装插件：
npm install mini-css-extract-plugin -D
配置片段（需同时改 plugins 和 rules）：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })],
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
}
-
MiniCssExtractPlugin.loader是个特殊 loader，不能直接写字符串'mini-css-extract-plugin' - 开发模式下仍建议保留
style-loader，避免每次修改都要刷新页面看样式 - 如果用了 CSS Modules，
css-loader需加options.modules: true，且sass-loader不影响它
容易被忽略的兼容性细节
sass-loader v12+ 默认使用 Dart Sass，但如果你项目里还残留 node-sass，会有冲突——两者不能共存，且 node-sass 已废弃，不支持 @use 规则。
- 检查是否误装了
node-sass：npm ls node-sass，有就npm uninstall node-sass - Dart Sass 安装后默认路径是
node_modules/sass，无需额外配置implementation选项 - 如果要用
@use引入模块（推荐），确保sass版本 ≥ 1.33.0 - Windows 下路径含空格或中文可能触发 Dart Sass 编译失败，建议项目路径纯英文无空格
真正卡住人的往往不是“怎么配”，而是配完发现样式没生效、图片路径 404、或者热更新失效——这些问题八成出在 loader 链顺序、依赖版本冲突，或 MiniCssExtractPlugin 在 dev 模式下误用。
