sass-loader 必须在 css-loader 之前、style-loader 之后，否则解析失败；模块化由 css-loader 的 modules 配置控制，非文件名；additionalData 是注入全局变量的推荐方式；importLoaders: 1 确保 @import 被正确处理。
loader 顺序写反会导致 sass-loader 完全不生效
Webpack 中 loader 执行顺序是从右到左、从下到上，sass-loader 必须在 css-loader 之前，而 css-loader 又必须在 style-loader 或 MiniCssExtractPlugin.loader 之前。否则 css-loader 收到的不是 CSS 字符串，而是 JS 模块或原始 SCSS 文本，直接报错或静默失效。
常见错误配置：
-
use: ['sass-loader', 'css-loader', 'style-loader']→sass-loader输出未被消费，css-loader接收到的是 JS 模块（如module.exports = {...}），解析失败 -
use: ['style-loader', 'sass-loader', 'css-loader']→css-loader被跳过，全局样式泄露，模块化失效
正确顺序（开发环境）：
use: ['style-loader', 'css-loader', 'sass-loader']
生产环境用 MiniCssExtractPlugin.loader 替代 style-loader，其余不变。
立即学习“前端免费学习笔记（深入）”；
css-loader 的 modules 配置决定是否启用 CSS Modules
sass-loader 本身不识别 .module.scss，也不控制模块化行为——它只负责把 SCSS 编译成标准 CSS 字符串。真正启用类名哈希化或 :export 导出的，是 css-loader 的 modules 配置。
- 写
modules: true或modules: { mode: 'local' }：启用默认模块化，生成类似Button_button__abc123的类名 - 写
modules: { mode: 'icss' }：仅处理:export块，适合导出主题色等变量给 JS 使用 - 别写
modules: { auto: true }：Webpack 5+ 已废弃，会被忽略 - 不要依赖文件名自动匹配（如
.module.scss）：Webpack 的启发式规则不稳定，容易被其他 rule 覆盖，显式配置更可靠
sass-loader 的 additionalData 是注入全局变量的唯一推荐方式
想让所有 SCSS 文件都能直接用 $primary 或 @mixin flex-center，别用 includePaths 引入全局文件（易污染、难维护、不支持 HMR 热更新），改用 additionalData 选项。
示例（Webpack 配置中）：
use: [
'style-loader',
{
loader: 'css-loader',
options: { modules: true }
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
additionalData: `@import "@/styles/variables.scss"; @import "@/styles/mixins.scss";`
}
}
]
注意点：
-
additionalData内容会在每个 SCSS 文件编译前拼接到开头，属于“预编译上下文”，不影响模块作用域 - 路径需相对于项目根目录或用
~别名（需配合resolve.alias） - 如果用了
url()或@import相对路径，确保这些路径在additionalData注入后仍能被 sass 正确解析
importLoaders 参数影响 @import 的嵌套处理
当 SCSS 文件里写了 @import "base"，css-loader 默认不会去解析这个被引入的文件是否也含 @import 或是否应走模块化逻辑——除非你告诉它：“前面还有几个 loader 要回溯处理”。
所以务必在 css-loader 的 options 中设 importLoaders: 1：
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1 // 表示 css-loader 向前看 1 个 loader（即 sass-loader）来处理 @import
}
}
不设这个值，深层 @import 的文件可能被当成普通 CSS 加载，导致变量未定义、mixin 找不到、模块化失效等问题。
最常被忽略的是 importLoaders 和 modules 的显式声明——很多人以为文件名带 .module.scss 就万事大吉，结果热更新时变量突然不生效，或者嵌套 @import 报错，其实只是 loader 链没对齐、配置没写全。
