Global SCSS 在 React (Gatsby) 中使用 CSS 模块

Question

我正在尝试在使用 CSS 模块的 Gatsby 项目中使用一些 SCSS variables/fonts。目前我的项目结构如下所示：

来源
├── 组件
├── 页脚
├── footer.module.scss
├── index.js
├── 表头
├── header.module.scss
├── index.js
├── Layout.js
├── layout.module.scss
├── 页数
├── index.js
├── 款式
├── _typography.module.scss
├── _variables.module.scss

Gatsby's docs 建议将全局样式放入布局组件（包含页眉和页脚），然后将其包裹在所有其他组件周围。这适用于 layout.module.scss 文件中包含的样式，但如果我将 _variables.module.scss 导入此文件，则我无法使用其他 SCSS 文件中的变量（例如 header.module.scss).

构建我的应用程序以便我可以在我的模块中访问全局 variables/fonts 的最佳方式是什么？是否只需要在需要时将部分文件导入所有单独的模块？

谢谢！

Answer 1

您有多种方法。我认为最好和最直接的方法是在需要时将部分文件（变量、函数、混合等）导入到每个单独的模块中，因为它是该特定文件的依赖项（它具有结构意义）。

如果您的系统和模块结构正确，webpack 将 tree shake 您的 SCSS 模块并删除死代码，因此您无需担心导入相同的文件（假设 _variables.module.scss) 进入每个特定模块。