webpack 4 升级 webpack 5 后 scss 编译失败主因是 sass-loader、css-loader、sass/node-sass 版本未对齐：须卸载 node-sass，安装 sass 和 sass-loader@13.3.2，css-loader 升至 @6.8.1，并清理缓存。
Webpack 4 升级到 Webpack 5 后，SCSS 编译报错不是配置写错了，而是 sass-loader、css-loader、node-sass/sass 三者中至少有一个没对齐新环境。硬切版本大概率触发 this.getOptions is not a function 或 Cannot find module 'sass' 这类底层调用失败。
sass-loader 版本必须升到 @12+，且彻底弃用 node-sass
Webpack 5 移除了 this.getOptions 的旧 API，而 sass-loader@11 及更早版本仍依赖它。同时，node-sass 已归档，不支持 Webpack 5 和 Node.js 16+，装了也编译失败。
- 执行
npm uninstall node-sass --save-dev，确保npm ls node-sass返回 empty - 安装 Dart Sass：
npm install sass --save-dev - 装兼容 Webpack 5 的 sass-loader：
npm install sass-loader@13.3.2 --save-dev（@13.x 是当前最稳组合） - 删掉
vue.config.js或webpack.config.js中所有implementation: require('node-sass')—— 新版自动识别sass
css-loader 和 style-loader 要同步升级并调整选项
css-loader@6+ 是 Webpack 5 唯一支持的主版本，但它的 API 完全变了：minimize 字段被移除，esModule 默认为 true，和 MiniCssExtractPlugin 搭配时必须显式关掉。
- 卸载旧版：
npm uninstall css-loader style-loader --save-dev - 重装：
npm install css-loader@6.8.1 style-loader@3.3.3 --save-dev - 如果用了
MiniCssExtractPlugin，loader 链里css-loader的 options 必须加{ esModule: false } - 删掉 webpack 配置中所有
minimize: true—— CSS 压缩交给CssMinimizerPlugin统一管
@use / @forward 在 SCSS 里失效？检查是否混入了 @import
Webpack 5 + sass-loader@13 默认启用 Dart Sass 模块系统，但只要文件里有任何一行 @import（哪怕在注释后），整份文件就退化成 legacy 模式，@use 被静默忽略。
- 确认
@use是文件第一行非空、非注释内容，不能包在@media或@mixin里 - 被
@use的文件名必须以下划线开头，例如_variables.scss，写成variables.scss就找不到 - 路径不能带
.scss后缀：@use '@/styles/_variables'✅，@use '@/styles/_variables.scss'❌ - 运行
npm ls sass确认只有sass，没有node-sass—— 后者会让整个模块系统降级
第三方库样式（如 Element UI、Ant Design）编译失败
错误常表现为 Can't resolve 'element-ui/lib/theme-chalk/index.css'，本质是 sass-loader 错把 .css 当作 Sass 模块去 resolve，但它只是纯 CSS。
- 别在
.scss文件里@import第三方的.css—— 改用普通 JSimport，让css-loader处理 - 确保 webpack rules 中
.css规则排在.scss规则之前，否则会被 sass-loader 拦截 - 想定制主题？直接
@use 'element-ui/packages/theme-chalk/src/index'（前提是它提供 SCSS 源码） - 若用
~引用 node_modules 里的 SCSS，必须在 sass-loader options 中设webpackImporter: true和includePaths: [path.resolve(__dirname, 'node_modules')]
最容易被忽略的是缓存残留：Webpack 5 的 filesystem cache 会记住旧 loader 的二进制行为，哪怕你改了版本，它可能还在用 node-sass 编译器跑。清掉 node_modules/.cache/webpack 和 package-lock.json 再重装，比反复调配置更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
