在React（Gatsby）中结合CSS Modules使用全局SCSS的方案咨询

我明白你现在碰到的麻烦了——在Gatsby结合CSS Modules的项目里，全局SCSS变量没法在各个组件模块里共享，每次都要手动导入实在太繁琐对吧？结合你的项目结构，我给你几个实用的解决方案，帮你搞定全局变量和字体资源的共享问题：

方案1：用gatsby-plugin-sass自动注入全局变量（最省心的方案） #

Gatsby的sass插件支持自动把指定的SCSS全局文件注入到所有SCSS模块中，这样所有.module.scss文件都能直接用全局变量，不用再手动导入。

具体步骤：

1. 先确认你已经安装了必要的依赖，如果没有的话，执行：

   npm install gatsby-plugin-sass sass
   

2. 在项目根目录的gatsby-config.js里配置这个插件，添加additionalData选项来指定要全局注入的文件：

   module.exports = {
     plugins: [
       {
         resolve: `gatsby-plugin-sass`,
         options: {
           // 注入全局变量文件，路径要和你的项目结构对应
           additionalData: `@import "${__dirname}/src/styles/_variables.module.scss";`,
           // 如果还有字体相关的全局样式文件，也可以一起注入
           // additionalData: `@import "${__dirname}/src/styles/_variables.module.scss"; @import "${__dirname}/src/styles/_typography.module.scss";`
         },
       },
     ],
   }
   

   配置完成后重启Gatsby开发服务，所有SCSS模块里就能直接使用_variables.module.scss里定义的变量了。

方案2：手动导入全局文件（适合小项目或需要精确控制的场景） #

如果不想用全局注入，也可以在每个需要用到全局变量的SCSS模块顶部手动导入全局文件，比如：

// src/components/Header/header.module.scss
// 注意路径要根据当前文件的位置调整
@import "../../styles/_variables.module.scss";

.header {
  color: $primary-color; // 直接使用全局变量
}

这种方式虽然有点繁琐，但好处是能清晰看到每个模块依赖的全局资源，适合模块数量不多的小型项目。

字体资源的处理建议 #

对于字体文件，建议你把它们放在src/fonts目录下，然后在_typography.module.scss里定义@font-face规则：

// src/styles/_typography.module.scss
@font-face {
  font-family: "CustomFont";
  src: url("../fonts/CustomFont-Regular.woff2") format("woff2"),
       url("../fonts/CustomFont-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

然后通过方案1的全局注入方式，把_typography.module.scss也加入到gatsby-plugin-sass的additionalData里，这样所有SCSS模块都能直接使用这个自定义字体：

// src/components/Header/header.module.scss
.header {
  font-family: "CustomFont", sans-serif;
}

如果用方案2的手动导入方式，就在需要使用字体的模块里导入_typography.module.scss即可。

额外小提示：区分全局样式与CSS Modules样式 #

因为你用的是CSS Modules，注意不要把全局生效的样式（比如body的默认样式、全局重置样式）放在带.module.scss后缀的文件里，最好单独创建一个不带后缀的global.scss文件，然后在Layout.js里直接导入：

// src/components/Layout.js
import "../styles/global.scss"; // 导入全局样式
import layoutStyles from "./layout.module.scss";

// ... 组件代码

这样能避免CSS Modules的作用域隔离影响全局样式的生效。

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