使用@use导入其他scss文件变量时Live Sass Compiler报错如何解决

报错原因 #

• 根本原因是当前使用的Sass编译器不支持@use规则：@use是Dart Sass 1.23.0版本才新增的特性，目前已经停止维护的LibSass（对应npm包node-sass）完全不支持该规则。编译器无法识别@use导入的命名空间，会把variables.$secondary-color当作普通CSS语法解析，自然就抛出了表达式不合法的报错。
• 少数情况是构建工具的Sass loader配置错误，虽然本地安装了Dart Sass，但编译时依旧调用了旧的LibSass处理器。

修复方案 #

• 方案一（推荐，长期有效）：替换旧编译器为Dart Sass
  首先卸载旧的node-sass包，安装官方维护的sass包（即Dart Sass的npm发行版）：

  npm uninstall node-sass
  npm install sass -D
  

  如果使用sass-loader等构建工具插件，需要在配置中指定编译器实现，以webpack的sass-loader为例：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            "style-loader",
            "css-loader",
            {
              loader: "sass-loader",
              options: {
                implementation: require("sass"),
              },
            },
          ],
        },
      ],
    },
  };
  

  替换完成后你原本的@use写法本身符合规范，可以直接正常运行。
• 方案二（临时过渡）：改用@import规则导入
  如果暂时无法升级编译器，可以将@use写法替换为即将废弃的@import，直接调用变量即可：

  // style.scss 修改后
  @import '../../variables';
  
  .foo {
    background-color: $secondary-color;
  }
  

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