根本不是路径写错了，而是文件没被识别为Sass partial；Dart Sass要求被@use的文件必须以下划线开头（如\_variables.scss），否则报“No module with the name”错误。
为什么 @use 在 .module.scss 里报 “No module with the name”
根本不是路径写错了，而是文件没被识别为 Sass partial。Dart Sass 要求所有被 @use 的文件必须以下划线开头（如 _variables.scss），否则直接拒绝加载。你写了 @use "variables"，但实际文件叫 variables.scss，它就找不到。
常见错误包括：
- 文件名是
theme.scss，却想用@use "theme"→ 必须改名成_theme.scss - 路径用了别名但没配
--load-path或构建工具的includePaths→@use "@/styles/theme"不生效，得写@use "../../styles/_theme" - 在
.module.scss里混用了@import和@use→ Sass 编译器直接报错，二者不能共存
composes 在 .module.scss 中完全不生效
composes 是 CSS Modules 的语法，不是 Sass 的能力。Sass 编译器（dart-sass）压根不认识它，遇到就跳过或报错。只有当 Webpack/Vite 先把 .module.scss 交给 css-loader（开启 modules: true）处理时，composes 才会被解析。
所以必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 文件后缀严格为
.module.scss（不能是.scss或.module.css） - Webpack 中
css-loader的modules选项已启用（v6+ 默认只对*.module.*生效） -
composes只能引用同项目中其他.module.css或.module.scss导出的类名，不能跨到纯.scss文件
为什么 @apply 或 theme() 在 .module.scss 里报错
因为 @apply 和 theme() 是 Tailwind 的 PostCSS 插件功能，而 .module.scss 文件由 Sass 编译器先处理——它既不认识这些指令，也无法调用 Tailwind 的 JS 运行时。
典型错误现象：
-
Error: Unknown rule @apply（Sass 报错） -
Error: Undefined function theme()（Sass 尝试解析函数失败） - 即使配置了 PostCSS 插件，只要文件后缀是
.scss，Sass 就会先截胡，PostCSS 根本收不到原始内容
唯一可行路径：改用 .module.css + @tailwindcss/nesting 插件，让嵌套和 @apply 都在 PostCSS 层完成。
VSCode 里 import styles from './Button.module.scss' 没提示
这不是 loader 配置问题，而是编辑器没把 .module.scss 当作 CSS Modules 类型处理。VSCode 默认只给 .module.css 提供样式导出智能提示，对 .module.scss 需要额外声明。
关键操作：
- 确保 tsconfig.json 启用了
"types": ["css-modules"]并装了@types/css-modules - 在
.vscode/settings.json中加"cssModules.enabled": true - 检查右下角语言模式是否为
CSS，不是SCSS—— 如果是 SCSS，VSCode 就不会触发 CSS Modules 语言服务
最稳妥的做法其实是避免用 .module.scss 做模块入口，改用 .module.css 写主样式，再通过 @use 导入 _variables.scss 等纯逻辑文件 —— 这样编辑器、编译器、运行时各司其职，不容易串场。
