必须安装并链式使用sass-loader、css-loader和style-loader（开发期）或mini-css-extract-plugin（生产期），顺序为sass-loader→css-loader→style-loader，缺一不可。
webpack 配置 Sass 加载器需要哪些 loader
必须安装并链式使用 sass-loader、css-loader 和 style-loader（开发期）或 mini-css-extract-plugin（生产期）。缺一不可，顺序也不能错：sass-loader → css-loader → style-loader。
常见错误是只装了 sass-loader，结果编译报错 Module parse failed: Unexpected character '@'——这是因为 Webpack 默认不认识 @import 和变量语法，必须靠 css-loader 解析 CSS 模块化规则，再由 sass-loader 把 .scss 编译成 CSS 字符串。
-
sass-loader负责调用 Dart Sass（默认）或 Node Sass（已弃用），处理@use、@forward、嵌套、变量等 -
css-loader解析@import（CSS 内的）、url()，启用模块化需加modules: true -
style-loader把 CSS 注入标签；生产环境应换为MiniCssExtractPlugin.loader输出独立 CSS 文件
如何让 Sass 正确解析全局变量和 mixin
直接在组件里 @import 公共文件太重复，推荐用 sass-loader 的 additionalData 选项自动注入：
rules: [{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `@use "@/styles/variables" as *; @use "@/styles/mixins" as *;`
}
}
]
}]
注意路径别写死，@/ 是 webpack 的 alias，需在 resolve.alias 中提前配置。否则会报错 Can't find stylesheet to import。
立即学习“前端免费学习笔记（深入）”；
- 避免用
includePaths+@import拼路径，容易和 Vue / React 单文件组件里的行为不一致 -
additionalData在每个 Sass 文件编译前插入，所以变量名冲突风险高，建议用@use "xxx" as v显式命名空间 - 如果项目用的是
@import旧语法（非@use），additionalData里也得用@import，但不推荐
Vue 或 React 项目中 Sass 配置容易漏掉什么
单文件组件（SFC）里写 时，Webpack 规则必须匹配 /\.s[ac]ss$/i，而不是只写 /\.scss$/i——否则 .sass（缩进语法）文件会失败。
另一个高频问题是热更新失效：修改变量后组件样式没刷新。这通常是因为 css-loader 开启了 modules，但组件里没用 module 属性，导致局部作用域和全局样式混用。
- Vue CLI 用户不用手动配，但升级到 Vue 3 + Vite 后，
sass是 peer dep，必须显式安装sass（不是node-sass） - React + Create React App 默认不支持
@use，需 eject 或改用 Craco 覆盖 webpack 配置 - 如果用了 CSS Modules，确保
css-loader的modules选项与组件中module属性一致，否则类名不会哈希
为什么 Sass 编译慢？几个关键优化点
大型项目里 sass-loader 可能成为构建瓶颈，尤其在 watch 模式下反复编译。根本原因常是递归 @import 太深，或未启用缓存。
最有效的优化是开启 cache 和限制 implementation：
options: {
implementation: require('sass'), // 强制用 Dart Sass（比 node-sass 更稳定）
sassOptions: {
fiber: require('fibers') // 提升嵌套解析性能（尤其 Windows）
},
cache: true // 启用 loader 级缓存，默认 false
}
- 禁用 sourceMap（
sourceMap: false）可显著提速，开发阶段按需开启 - 避免在
additionalData中@use大型文件（如含几十个变量的theme.scss），拆成按需引入 - Webpack 5+ 可配合
cache.type: 'filesystem'进一步加速，但 Sass 自身缓存已覆盖大部分场景
真正卡顿往往不是 Sass 本身，而是 loader 链中某个环节没设缓存，或者用了未声明的 alias 导致反复 resolve 失败重试。
