SCSS中@use报“Module not found”且非路径错误，实为Sass模块系统未启动：文件名未以下划线开头、@use未置顶或混用@import导致整文件降级为legacy模式，此时@use被静默忽略。
SCSS里@use报“Module not found”怎么定位
不是路径写错了，而是 Sass 模块系统根本没启动——常见于文件名没加下划线、@use没放在文件最顶部、或混用了@import。Sass 一旦检测到任意@import，整份文件就降级为 legacy 模式，@use直接被忽略，连报错都不会有，变量就是找不到。
检查点列在下面：
-
@use语句必须是 SCSS 文件中第一行非空、非注释的内容；不能包在@media、@mixin或 CSS 规则里 - 被引入的文件名必须以下划线开头，比如
_variables.scss；写成variables.scss或variables.css都会失败 - 路径要写对：
@use '@/styles/_variables'可以，@use '@/styles/variables'（缺下划线）或@use '@/styles/_variables.scss'（多扩展名）都可能不认 - Vue 单文件组件中
<style lang="scss">内写@use，需确认项目已启用 Dart Sass（sass包），而非已停更的node-sass
为什么~开头的@import总提示Can't resolve
@import '~bootstrap/scss/bootstrap'这类写法失败，核心原因是sass-loader没开webpackImporter: true，导致它把~当普通字符串处理，不走 Webpack 的模块解析逻辑。
光配resolve.alias没用，Sass 编译器自己不读 alias。必须显式告诉 sass-loader：“请把~交给 Webpack 处理”。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 在
sass-loader的 options 中加webpackImporter: true，不能只靠全局 alias - 同时配
includePaths: [path.resolve(__dirname, 'node_modules')]，否则即使开了webpackImporter，Sass 解析器也找不到node_modules里的文件 - Vite 用户注意：
~在 Vite 中默认无效，得用alias配@/node_modules/，再在css.preprocessorOptions.sass.additionalData里注入
第三方库的url()路径404但@import成功
@import能过，说明 Sass 层路径没问题；但最终生成的 CSS 里url('./fonts/glyphicons.woff')还是原样输出，浏览器加载时 404——这是 loader 链断了，css-loader或file-loader压根没处理第三方库内部的url()。
Webpack 默认只处理你项目源码里的url()，对node_modules里的视而不见。
补救措施：
- 给
css-loader加options: { url: true }（Webpack 5+ 默认开启，旧版必须手动） -
file-loader或url-loader的test规则里，加上include: [path.resolve(__dirname, 'node_modules')] - 如果第三方库用的是相对路径如
../fonts/xxx，确保构建后 CSS 文件位置与引用关系仍匹配，否则得靠public目录或别名重写
变量跨文件失效但编译不报错
编译通过、控制台无报错，但$color-primary在某个文件里就是 undefined——大概率是@use用了as *解构，但多个模块同名变量互相覆盖，或者additionalData配置路径写错，比如漏了下划线或多了.scss后缀。
Vue 项目常用vue.config.js批量注入，这里最容易踩坑：
- 写
@use "@/styles/_variables" as *;才对；写成@use "@/styles/variables" as *;（缺_）或@use "@/styles/_variables.scss" as *;（多.scss）都会静默失败 - 如果同时注入
_mixins和_variables，避免都用as *，否则$spacing-sm可能被_mixins里同名变量覆盖 - uni-app 等框架要用
scss.additionalData，不是css.additionalData，字段名错一个字母就白配
