VSCode Live Sass Compiler下SCSS全局变量未生效 如何简化导入

你遇到的报错是Sass新模块系统的正常规则：@use 导入的作用域是模块隔离的，仅在当前导入的文件内生效。你在主文件style.scss中导入的variables模块，无法直接被同时导入的gallery模块访问。

早年webpack/laravel mix项目能全局生效，要么是你用了已被Sass官方废弃的@import语法（@import无模块隔离，所有导入内容共享全局作用域），要么是你在构建配置中开启了自动注入全局资源的规则，并不是Live Sass Compiler的功能缺陷。

方案1：配置Live Sass Compiler自动注入（完全无需手动导入） #

这是最贴合你需求的方案，配置完成后所有SCSS文件都会自动加载变量文件，不需要手动写导入语句：

1. 打开VSCode设置，搜索Live Sass Compiler: Settings，点击「在settings.json中编辑」
2. 添加如下配置项：

// 自动向所有SCSS文件头部注入变量导入语句
"liveSassCompile.settings.additionalData": "@use 'variables' as *;"

注意事项：如果_variables.scss不在项目根目录，需要补全相对路径，比如存放在src/styles目录下就写成@use './src/styles/variables' as *;。其中as *表示取消命名空间限制，可直接使用$primary等变量，不需要加模块前缀。
配置完成后重启Live Sass Compiler即可生效。

方案2：用@forward汇总全局资源简化手动导入 #

如果你想保留Sass模块系统的显式导入规范，不想用全局注入，可以通过@forward规则汇总所有全局资源，减少重复导入代码：

1. 新建全局汇总分片文件_global.scss，内容如下：

// 批量转发所有全局变量、mixin、函数
@forward 'variables';
@forward 'mixins'; // 其他全局资源都可以在此处统一添加
@forward 'functions';

2. 所有需要用到全局资源的分片文件，仅需导入一次global模块即可：

// _gallery.scss顶部仅需添加这一行导入
@use 'global' as *;

#gallery {
    background-color: $primary;
}

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