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

Question

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

src
├── components
        ├── Footer
                ├── footer.module.scss
                ├── index.js
        ├── Header
                ├── header.module.scss
                ├── index.js
        ├── Layout.js
                ├── layout.module.scss
├── pages
        ├── index.js
├── styles
        ├── _typography.module.scss
        ├── _variables.module.scss

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

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

谢谢！

标签： reactjssassgatsby

Answer 1

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

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