必须搭配sass-loader、css-loader和style-loader（或minicssextractplugin.loader）使用，因sass-loader先将.scss编译为css，css-loader再解析@import/url()，style-loader最后注入标签；顺序颠倒或缺失任一环节均导致module parse failed错误。
css-loader 本身不处理 Sass，它只负责解析 CSS 语法（比如 @import、url()），所以单独配 css-loader 是没法引入 .scss 文件的。必须搭配 sass-loader 和 style-loader（或 MiniCssExtractPlugin.loader）一起用，顺序和职责缺一不可。
为什么只装 css-loader 会报 Module parse failed: Unexpected character '@'
Webpack 默认把 .scss 当作普通文本，遇到 @use、@mixin 或 @import 就直接抛错。css-loader 不认识这些 Sass 语法，它只认标准 CSS；真正“翻译” Sass 的是 sass-loader。所以错误不是 css-loader 配错了，而是根本没走通整个链路。
sass-loader → css-loader → style-loader 这个顺序为什么不能换？
Webpack 的 use 数组从右往左执行：
-
sass-loader先把.scss编译成纯 CSS 字符串 -
css-loader接着解析这个字符串里的@import 'reset.css'或url(./icon.png)，转成模块依赖 -
style-loader最后把最终结果注入<style></style>标签
如果顺序写反，比如 ['css-loader', 'sass-loader']，css-loader 会尝试解析未编译的 Sass 源码，立刻报错。
开发环境 vs 生产环境的 loader 差异
开发时用 style-loader 没问题，热更新快；但上线必须换掉，否则所有 CSS 打进 JS bundle，导致 FOUC 和缓存失效：
- 开发环境：用
'style-loader' - 生产环境：必须用
MiniCssExtractPlugin.loader，且要提前npm install mini-css-extract-plugin -D - 不能把两者混在同一个 rule 里——
MiniCssExtractPlugin.loader在mode: 'development'下直接崩溃
典型配置片段：
rules: [{
test: /\.s[ac]ss$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass') // 显式指定 Dart Sass
}
}
]
}]
全局变量和 mixin 怎么自动注入？别用 includePaths
想让每个 .scss 文件默认能用 $primary 或 @mixin flex-center，推荐用 sass-loader 的 additionalData 选项：
- 路径必须匹配 Webpack alias（比如
@/styles/variables），否则报Can't find stylesheet to import - 用
@use "xxx" as *会污染全局命名空间，建议显式命名：@use "@/styles/variables" as v，然后写v.$primary - 别用
includePaths+@import拼路径，它和 Vue/React 单文件组件里的<style lang="scss"></style>行为不一致，容易漏文件
示例：
{
loader: 'sass-loader',
options: {
additionalData: `@use "@/styles/variables" as v; @use "@/styles/mixins" as m;`
}
}
Sass 文件名匹配一定要写成 /\.s[ac]ss$/i，而不是 /\.scss$/i——否则 .sass（缩进语法）文件会被忽略，这种细节上线前才暴露，很难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
