Sass中@import相对路径可用但@use报未定义变量错误

核心原因：@use 的命名空间机制与 @import 本质不同 #

@import 是将目标文件的所有内容直接混入当前作用域，所以你能直接调用 $ligne-fichier-cs-height；但 @use 是模块化导入，默认会给导入的模块添加命名空间，变量必须通过命名空间访问，直接写变量名自然会报“未定义”。

具体排查步骤 #

• 检查变量访问方式
  若使用默认的 @use '../versions-cs-theming';，变量需要通过模块名（即文件名去掉.scss后缀）来访问：

  // 正确写法
  .your-selector {
    height: $versions-cs-theming.$ligne-fichier-cs-height;
  }
  

  要是想直接使用变量名，可通过 as * 取消命名空间：

  @use '../versions-cs-theming' as *;
  

• 确认变量是否为模块私有
  查看 versions-cs-theming.scss 里的变量名：如果变量以 - 或 _ 开头（比如 $_ligne-fichier-cs-height），那它属于模块私有变量，@use 无法访问，但 @import 会强制导入所有内容（包括私有变量）。这种情况要么去掉变量名的前缀，要么在主题文件里用 @forward 导出私有变量：

  // 在 versions-cs-theming.scss 中添加
  @forward '.' show $_ligne-fichier-cs-height as ligne-fichier-cs-height;
  

• 验证路径拼写准确性
  你的目录结构是version文件夹下包含version-cs子文件夹和version-cs-theming.scss，从version-cs/version-cs.component.scss往上跳一级的路径应为../version-cs-theming（注意是version而非versions）。如果主题文件名确实是versions-cs-theming.scss则没问题，否则可能是路径多打了一个s，导致@use找不到模块（不过@import能正常工作的话，大概率不是路径问题）。

额外提示 #

建议尽量保留命名空间，避免变量污染——这也是Sass推出@use替代@import的核心原因。如果多个模块有同名变量，命名空间能帮你清晰区分变量来源。

内容的提问来源于stack exchange，提问作者Gonzalo Diaz Ailan