直接替换@import为@use会编译失败,因Dart Sass 2.0+已彻底移除@import支持;@use仅认下划线开头的partial文件(如_variables.scss),路径须精确匹配、不补扩展名,且强制命名空间访问(如variables.$primary-color),混用@import会导致整个文件降级为legacy模式。

直接把 @import 换成 @use 会编译失败,不是语法替换问题,而是 Dart Sass 2.0+ 已彻底移除 @import 支持——写它就报错,根本不会进入“变量访问不到”的阶段。
为什么 @use 总报 “No module with the name”
这不是路径写错了,是文件名或结构不合规。Dart Sass 只认以下划线开头的 partial 文件(如 _variables.scss),且路径必须精确匹配文件系统:
-
@use "variables"✅ —— 对应当前查找路径下的_variables.scss;写成variables.scss或_variables.css都会失败 -
@use "_variables"❌ —— 显式带下划线会被拒绝,@use自动补_前缀,不能手动加 -
@use "variables.scss"❌ —— 不自动补扩展名,也不接受显式后缀 - 相对路径从当前文件算起:
src/components/button.scss要引入src/scss/_colors.scss,得写@use "../../scss/colors",而不是@use "colors" - 路径含空格或中文 → Dart Sass 直接拒绝解析,不报错也不警告
@use 后所有变量/混入都报 “Undefined variable” 怎么办
这不是 bug,是命名空间机制生效了:@use 默认不注入任何东西到全局作用域,所有成员必须通过命名空间前缀访问:
-
@use "variables"→ 必须写variables.$primary-color,不能写$primary-color -
@use "variables" as v→ 必须写v.$spacing-md,写variables.$spacing-md或$spacing-md都会失败 - 连字符变量(如
$text-sm)不能转驼峰($textSm)——Sass 不做任何转换 -
@use "variables" as *可解构导入,但仅限单个模块;多个as *会静默覆盖同名变量,不推荐在业务文件中使用
怎么引入 normalize.css 这类纯 CSS 文件
@use 不支持直引 CSS 文件,遇到 /* 开头会立刻报 Invalid CSS after "":
立即学习“前端免费学习笔记(深入)”;
- 新建一个包装文件,命名为
_normalize-wrapper.scss(必须带下划线) - 内容只有一行:
@import "node_modules/normalize.css/normalize.css"; - 该包装文件里不能写任何 Sass 逻辑(比如变量、
@mixin、@use),否则可能触发解析失败 - 主文件中写:
@use "normalize-wrapper"或@use "normalize-wrapper" as * - 别写
@use "normalize.css"——这不是合法模块名,也不是 partial 文件
最容易被忽略的是:只要文件里存在任意一行 @import(哪怕只是注释掉的、或来自第三方库间接引入的),整个文件都会降级回 legacy 模式,@use 失效、命名空间消失、变量回归裸名访问——错误信息不会提示“你混用了”,只会报一堆 Undefined variable。


















