在 React (Gatsby) 中使用 CSS 模块的全局 SCSS

Question

我正在尝试在使用 CSS 模块的 Gatsby 项目中使用一些 SCSS 变量/字体。目前我的项目结构如下：

源
├── 组件
├── 页脚
├── footer.module.scss
├── index.js
├── 标题
├── header.module.scss
├── index.js
├── 布局.js
├── layout.module.scss
├── 页面
├── index.js
├── 款式
├── _typography.module.scss
├── _variables.module.scss

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

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

谢谢！

Answer 1

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

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