Vue组件使用Sass @use导入scss变量失败 @import可正常使用问题

核心原因 #

@use是Dart Sass 1.23.0版本新增的模块化语法，出现该报错通常是以下几个场景导致的：

• 项目依赖的Sass版本过低，不支持@use语法
• 构建工具的全局Sass注入配置和@use规则冲突
• 命名空间写法或导入路径有误

具体解决方法 #

1. 升级Sass依赖
   首先确认你项目中安装的是dart-sass（npm包名为sass），而非已经废弃的node-sass，执行以下命令替换依赖：

# 卸载旧的node-sass
npm uninstall node-sass
# 安装最新版dart-sass
npm install sass@latest -D

2. 修正全局注入配置
   如果你在vue.config.js/vite.config.js中配置了additionalData自动全局导入变量文件，需要把原来的@import写法替换为@use，或者直接删除全局注入配置，改为在需要用到变量的组件中单独用@use导入，避免解析冲突。
3. 修正导入和变量调用写法
   如果要使用默认命名空间调用变量，确认写法和路径正确：

// 组件style内
@use "../../css/colors" as colors; // 可以显式声明命名空间避免歧义
.btn {
  background: colors.$color-x;
}

如果不想加命名空间前缀，导入时可以指定别名*：

@use "../../css/colors" as *;
.btn {
  background: $color-x;
}

内容的提问来源于stack exchange，提问作者Artur Müller Romanov