Webpack 5 中 CSS 按需加载由 loader 链与 MiniCssExtractPlugin 共同实现：sass-loader 编译 SCSS，css-loader 解析 @import/url()，style-loader（开发）或 MiniCssExtractPlugin.loader（生产）注入或抽离 CSS；顺序错误、缺失 css-loader 或未注册插件均会导致报错。
Webpack 5 里 CSS 按需加载不是靠 Sass 决定的，而是靠 loader 链和插件配合实现；Dart Sass 只负责把 .scss 编译成 CSS 字符串，它本身不参与“按需”逻辑。 真正控制是否提取、是否分离、是否异步加载 CSS 的，是 css-loader 的配置 + MiniCssExtractPlugin（生产环境）或 style-loader（开发环境）的行为。下面直接说怎么做、为什么、容易错在哪。
为什么装了 sass-loader 还报 Module parse failed: Unexpected character '@'
这不是 Sass 的问题，是 loader 链断了。Webpack 默认只认识 JS，@import、$var、@mixin 这些语法必须由 sass-loader 处理，但处理完输出的是纯 CSS 字符串——而 Webpack 依然不认识 CSS，所以紧接着必须交给 css-loader 解析 @import 和 url()，再交给 style-loader 或 MiniCssExtractPlugin.loader 注入页面或抽离文件。
- 缺
css-loader→ 报Unexpected character '@'（来自 CSS 内的@import） - 缺
sass（Dart Sass 包）→ 报Can't resolve 'sass'，不是可选依赖，必须npm install --save-dev sass - 顺序写反（比如
css-loader放sass-loader前面）→ Sass 语法直接被当成 CSS 解析，立刻报错
MiniCssExtractPlugin.loader 是按需加载 CSS 的关键开关
开发时用 style-loader 把 CSS 打进 JS bundle，随 JS 一起下载执行；生产环境换成 MiniCssExtractPlugin.loader，就能把 CSS 单独抽成 .css 文件，配合代码分割（import() 动态导入）天然支持按需加载——JS chunk 加载时，对应的 CSS chunk 也会被并行请求。
- 必须在
rules中用isProduction ? MiniCssExtractPlugin.loader : 'style-loader'切换，不能全写style-loader - 必须在
plugins数组里 new 出MiniCssExtractPlugin实例，否则 loader 不生效 - 抽离后 CSS 不再内联，所以 HMR（热更新）在开发期会失效，这是正常现象，别因此回退到全用
style-loader
如何让每个 .scss 文件自动访问全局变量和 mixin
别用 includePaths —— 它只影响 @import 路径查找，不解决变量/mixin 注入。正确方式是 sass-loader 的 additionalData 选项，在每份 Sass 源码编译前，自动拼接一段内容：
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
additionalData: `@use "@/styles/variables" as *; @use "@/styles/mixins" as *;`
}
}
]
-
additionalData是字符串，不是文件路径，内容会被 prepend 到每个.scss文件开头 - 确保
@/styles/variables.scss存在且导出变量（用@forward或@use导出），否则@use会失败 - 如果用
@import替代@use，注意@import已被标记为 deprecated，Dart Sass 未来版本可能移除
真正难调的不是配置本身，而是 loader 链中任意一环缺失或顺序错位，错误信息又往往指向最表层（比如报 Sass 错误，实际是 css-loader 没接上）。建议每次增删 loader 后，用 npx webpack --stats verbose 看实际生效的 rule 链，比盲猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
