scss中@use报“module not found”并非路径错误，而是sass模块系统未启动：文件名未以下划线开头、@use未置顶或混用@import导致整文件降级为legacy模式，此时@use被静默忽略。
SCSS里@use报“Module not found”但路径没错
不是路径写错了，是 Sass 模块系统压根没启动。一旦文件里混了@import，整份 SCSS 就降级为 legacy 模式，@use被静默忽略，连错误都不报。
-
@use必须是文件中第一行非空、非注释的内容，不能包在@media、@mixin或任何 CSS 规则里 - 被引入的文件名必须以下划线开头，比如
_variables.scss；写成variables.scss或variables.css都不行 - 路径里不能带扩展名：
@use '@/styles/_variables'可以，@use '@/styles/_variables.scss'会失败 - Vue 单文件组件里用
@use，得确认项目装的是sass（Dart Sass），不是已停更的node-sass
Webpack 项目里@import '~bootstrap/scss/bootstrap'报 Can't resolve
根本原因是sass-loader没开webpackImporter: true，导致它把~当普通字符串处理，不走 Webpack 的模块解析逻辑。
- 光配
resolve.alias没用，Sass 编译器自己不读 alias，必须显式告诉sass-loader：“请把~交给 Webpack 处理” - 在
sass-loader的options里加webpackImporter: true - 同时配
includePaths: [path.resolve(__dirname, 'node_modules')]，否则即使开了webpackImporter，Sass 解析器也找不到node_modules里的文件 - 第三方库入口文件名要查清，比如 Bulma 是
bulma/bulma.sass，不是bulma/scss/index.scss
Vite 项目里@import或@use找不到 node_modules 中的 SCSS
~在 Vite 中默认无效，得靠 alias + 预处理器配置双管齐下。
- 先在
vite.config.ts里配 alias：'@/node_modules/': path.resolve(__dirname, 'node_modules/') - 再在
css.preprocessorOptions.sass.additionalData里注入全局@use或@import语句（慎用） - 更稳妥的做法是直接用相对路径或绝对路径别名：
@use '@/node_modules/bootstrap/scss/functions' - 确保
sass包已安装，Vite 默认用lightningcss或postcss，不自动启用 Dart Sass
TypeScript 报错 Cannot find module './index.module.scss'
这不是构建问题，是 TypeScript 不认识 SCSS 文件导出的类型，它只缺一份“词典”来描述这个模块长什么样。
- 在项目根目录建
globals.d.ts，内容就一行：declare module '*.module.scss' { const classes: { [key: string]: string }; export default classes; } - 如果还要支持普通
.scss（非 module），再加一句：declare module '*.scss' { const css: string; export default css; } -
tsconfig.json里确保include包含该声明文件，比如"include": ["src/**/*", "globals.d.ts"] - 改完后必须重启 TypeScript Server（VS Code 里按 Ctrl+Shift+P → “TypeScript: Restart TS server”）
~、TypeScript 是否有对应类型声明——三者缺一不可。尤其@use被静默忽略和~被当字符串这两点，最容易反复踩坑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
