sass-loader@16 升级后需全面迁移至 dart sass 模块系统：data 改为 additionaldata（仅字符串）、includepaths 移入 sassoptions 并精简路径、全局禁用 @import 改用 @use、清除 webpack 缓存。
sass-loader@16 一升级，旧配置基本全挂——不是你写错了，是它彻底砍掉了对 Webpack 4/5 旧 API 的兼容层，并强制启用 Dart Sass 模块系统，data、includePaths、outputStyle 这些字段全被移出顶层 options，且 @import 在任何位置出现都会让整个文件退化为 legacy 模式。
为什么 data 字段直接报 ValidationError
这个字段在 sass-loader@16 中已完全删除，不再接受别名或降级提示。旧版用的 data（或拼错的 dat）会被视为非法配置项，触发 ValidationError: Invalid options object。
- 必须改用
additionalData，且值只能是字符串（不能是函数或 Promise） -
additionalData内容需符合 Dart Sass 语法：路径必须带./或@/（后者依赖 Webpack alias 提前解析），不能写@use "vars"后不加分号 - 若内容含
@use，必须确保被引入文件名以下划线开头（如_variables.scss），且路径不带.scss后缀
includePaths 移进 sassOptions 后反而找不到变量
字段位置变了只是表象，真正问题是 Dart Sass 对 includePaths 的处理逻辑变了：它现在会把每个路径当模块根目录递归扫描，若你仍写 includePaths: ["node_modules"]，编译器会在每次构建时遍历整个 node_modules，不仅慢，还可能因路径冲突覆盖你本地的 _mixins.scss。
- 只保留真正需要的路径，比如
["src/styles"]或["./src/scss"] - 删掉所有指向
node_modules根目录的条目；第三方库的 SCSS 源码应显式@use "element-plus/theme-chalk/src/index"，而不是靠includePaths隐式命中 - 确认
sassOptions是直接挂在sass-loader的options下，不是嵌套在webpackConfig.module.rules[x].options.sassOptions里多了一层
@import 没报错但变量全 undefined
这不是路径问题，是 sass-loader@16 默认开启 legacy: false，只要文件里存在任意一行 @import（哪怕在注释里、在 @media 块内），整份文件就进入 legacy 模式，@use 被静默忽略，模块作用域失效。
- 搜索项目中所有
.scss文件，把@import全干掉，统一换成@use（第一行非空、非注释） - 第三方 UI 库的样式入口（如
element-plus/theme-chalk/src/index.scss）若含@import，不要直接@use它，改用其预编译好的 CSS 文件，或 fork 后手动转成@use风格 -
additionalData注入的内容也必须是@use，且不能和组件内 SCSS 内容混用@import，否则注入部分也会失效
最易被忽略的是：Webpack 缓存不会自动感知 sass-loader@16 的模块系统切换，node_modules/.cache 里可能还存着 legacy 模式下的解析结果，必须手动清掉再重装 —— 否则你会看到“配置明明改对了，但变量就是不生效”这种现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
