VSCode Live Sass Compiler全局Sass变量undefined问题求助

当前使用VSCode扩展 Live Sass Compiler（Glenn Marks维护版本），除全局Sass变量在App组件中引用返回undefined错误外，其余功能均运行正常。

项目结构 #

相关文件内容 #

_variables.scss #

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

$font_logo: "Great Vibes", cursive;
$max_width: 750px;

_defaults.scss #

* {
  box-sizing: border-box;
}

body {
  margin:0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing-: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

index.scss（入口样式文件，在App.js中引入） #

@import './variables';
@import './defaults';

App.js样式引入语句 #

import "./styles/index.scss";

正常运行的功能 #

标签、类选择器等全局样式均可正常生效，说明样式文件加载路径配置正确。

存在的问题 #

_variables.scss中定义的Sass变量无法正常使用，抛出undefined错误。

已尝试的排查操作 #

• 因Ritwick Dey版本的Live Sass Compiler已停止维护，更换安装了Glenn Marks维护的版本
• 尝试将@import语法替换为@use、@use 'path' as相关语法
• 尝试调整导入文件的顺序
• 检索多个相关技术主题帖均未找到有效解决方案

目前临时处理方案：在需要使用变量的scss文件中单独编写@import './variables';时，变量可正常使用，但期望实现仅在index.scss中全局引入一次变量文件，无需在每个用到变量的scss文件中重复编写导入语句。

这个问题是Sass本身的作用域规则+Live Sass Compiler默认编译逻辑共同导致的：你在index.scss里导入的变量，作用域仅局限在index.scss本身的编译流程中。拆分出去的其他组件级scss文件，Live Sass Compiler默认会单独执行编译，不会自动继承入口文件里导入的变量内容，自然会报undefined。之前在每个文件单独导入变量就能正常使用，也刚好印证了这个逻辑。
要实现一次导入全局可用，直接给Live Sass Compiler添加全局注入配置即可，操作步骤如下：

• 打开VSCode设置界面，搜索Live Sass Compiler相关配置，点击「在settings.json中编辑」
• 在配置中添加全局导入规则，让编译器处理每一个scss文件时，自动在文件头部注入变量文件的导入语句，参考配置如下：

{
  // 原有其他Live Sass Compiler配置保留即可，比如编译输出格式、输出路径
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css" // 替换为自己项目实际的css输出路径
    }
  ],
  // 配置scss文件查找根路径，后续导入不用写冗长的相对路径
  "liveSassCompile.settings.includePaths": [
    "${workspaceRoot}/src/styles" // 替换为自己项目中样式文件的实际存放目录
  ],
  // 配置全局自动注入的scss文件
  "liveSassCompile.settings.globalSassImports": [
    "_variables.scss"
  ]
}

• 保存配置后，停止当前正在运行的Live Sass Compiler编译服务，重新启动即可生效，后续无需在每个scss文件中重复导入变量文件。

补充说明：如果后续要将@import替换为Sass官方推荐的@use语法，需要注意@use默认自带模块命名空间，全局注入后调用变量需要加对应前缀，比如variables.$font_logo；如果想省去命名空间，可以单独建一个全局转发的scss文件，在文件内写入@use 'variables' as *;，再把这个转发文件配置到全局注入列表中即可。

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