SASS使用@use引入模块后通过命名空间访问变量报错如何解决？

根本原因 #

你当前使用的VSCode原版Live SASS扩展底层依赖已废弃的LibSass编译器，不支持Sass 1.23.0版本才推出的@use模块化规则，无法识别命名空间调用变量的命名空间.$变量名语法，因此抛出CSS表达式无效的报错。

解决方案 #

方案1：继续使用@use模块化规则 #

更换为支持Dart Sass的新版Live SASS扩展：

• 卸载当前已安装的旧版Live SASS Compiler
• 搜索安装由glenn2223维护的新版「Live Sass Compiler」，该版本默认使用Dart Sass内核，完全支持@use、@forward等现代Sass特性
• 禁用旧扩展后重启VSCode，重新编译即可正常识别命名空间变量语法

方案2：兼容旧版编译器，改用@import规则 #

如果不想更换扩展，可改用旧版Sass支持的导入规则：

1. 将style.sass首行的@use 'abstracts/branding' as branding替换为@import 'abstracts/branding'
2. 删除所有变量前的命名空间前缀，把branding.$primary、branding.$bright、branding.$secondary分别改为$primary、$bright、$secondary
3. 重新编译即可正常运行

注意：

• 两种方案均无需修改_branding.sass文件的内容，下划线前缀的partial文件规则对新旧语法都适用
• 切换新扩展后如果仍报错，检查abstracts文件夹是否和style.sass存放在同一级目录，确保导入路径正确

内容的提问来源于stack exchange，提问作者damo