VSCode使用Live Sass Compiler导入Sass变量出现编译错误如何解决

核心原因1：Live Sass Compiler扩展内置Sass版本不匹配 #

你本地全局安装的Dart Sass 1.38.0确实支持@use模块化语法，但旧版（原始作者已停更）Live Sass Compiler扩展默认内置的是早已停止维护的LibSass，不支持@use的命名空间写法，也不会调用你本地安装的Dart Sass，所以识别不了base.$primary-color这种带命名空间前缀的变量调用语法，才会抛出CSS语法错误。

核心原因2：@import语法规则使用错误 #

如果你改用@import导入局部文件，不需要加命名空间前缀。@import会将被导入文件的所有变量、样式全部注入全局作用域，直接写变量名即可，加base.前缀反而会被识别为无效语法。 #

两种解决方案 #

• 方案1：继续使用@use模块化语法
  卸载旧版Live Sass Compiler，安装仍在维护中的新版扩展（作者为glenn2223的Live Sass Compiler版本），该版本内置支持Dart Sass，你的现有代码不需要修改即可正常编译。
• 方案2：继续使用旧版扩展，改用@import语法
  将对应scss文件内容修改为：

  @import 'base';
  
  .inverse {
    background-color: $primary-color;
    color: white;
  }
  

  去掉命名空间前缀即可正常编译。

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