Gatsby用gatsby-plugin-sass加载内存Sass变量报已加载如何解决

问题原因 #

报错是两个因素共同导致的：

• gatsby-plugin-sass的additionalData配置会给所有被处理的.scss文件头部自动注入你写的导入语句，也就是说你单独导入_variables.scss的时候，这个文件处理时头部会被自动加上@import "utils/_index.scss";，而_index.scss里又导入了_variables.scss，相当于形成了自引用的重复加载，触发报错
• 普通.scss文件默认不会把Sass变量暴露给JS层，只有CSS Modules文件支持导出变量到JS

解决方案 #

方案1：改造变量文件为CSS Modules（推荐） #

1. 将_variables.scss重命名为_variables.module.scss，Gatsby会自动识别该后缀文件为CSS Modules
2. 同步修改utils/_index.scss里的导入语句为@import "variables.module.scss";，保持全局导入功能正常
3. 组件内直接导入改造后的CSS Modules文件即可读取变量：

import * as scssVars from '../../assets/scss/utils/_variables.module.scss'
// 变量自动去$前缀，中划线命名转驼峰
console.log(scssVars.colorBlack) // 输出 #000000

方案2：新增独立的变量导出文件 #

如果不想改动现有全局配置和导入逻辑，可以新增一个仅用于向JS导出变量的专用文件，比如命名为scss-export.module.scss，内容如下：

// 导入原变量文件
@import './_variables.scss';

// 手动声明需要导出到JS的变量
:export {
  colorBlack: $color-black;
  // 后续新增需要导出的变量都在此处补充
}

组件内直接导入这个新文件即可，不会触发重复加载报错：

import * as scssVars from '../../assets/scss/utils/scss-export.module.scss'

注意事项 #

• 不要直接导入已经被additionalData全局注入过的.scss文件，必然会触发重复加载逻辑
• 所有需要在JS层读取的Sass变量，必须通过CSS Modules的:export语法导出才能正常获取

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