如何使用 Gatsby 导入全局 SASS

Question

我正在尝试将全局 .scss 文件导入所有页面。

我有以下项目结构

/src
  /pages
    index.js
    index.module.scss
    /templates
      /restaurants
        /hungry
          hungry.js
          hungry.module.scss
  /styles
    typography.scss
    variables.scss
  /package.json
    gatsby-plugin-sass
    node-sass
  /fonts
    ...

我尝试通过gatsby-plugin-sass 传递选项，并使用此链接gatsby-browser.js 公开全局样式：Include sass in gatsby globally，但没有运气。

我的typography.scss 文件

typography.scss

将选项传递给 gatsby-config.js

My gatsby-config.js file

Error message

使用 gatsby-browser.js 公开全局样式

gatsby-browser.js

hungry.module.scss

Error message

我也尝试过阅读文档： https://www.gatsbyjs.com/docs/how-to/styling/global-css/

我是 Gatsby 的新手，目前完全没有想法。感谢您的帮助。

谢谢。

Answer 1

使用gatsby-browser.js 的方法是完全有效的，它应该可以工作，此外，你的路径在我看来是正确的。

关于您的typography.scss，显然相对路径似乎不起作用，请尝试使用../../path/to/fonts 或./path/to/fonts 添加/删除相对性。

另一种可能对您有用的方法是从您的gatsby-plugin-sass 插件中删除选项并将其作为.scss import 导入到所需的文件中。

假设您解决了typography.scss 中的相对路径问题（第一步）。完成后，您的 .subtitle 类文件，您可以简单地：

@import '../../../styles/fonts/typography.scss' 使用它。比如：

   @import '../../../styles/fonts/typography.scss
    .subtitle{
       font-family: $font-medium;
    }

所以，总结一下。第一步应该是修复相关字体导入，然后将该文件直接导入所需的.scss 文件中。

---

一旦您评论清单插件（它请求 GitHub 中缺少的资产），它就会正确加载字体：

注意 K，在这个排版中非常独特。

Gatsby 使用 /pages 文件夹中的路径来构建页面的 URL。您将模板文件夹放在 /pages 文件夹中，导致一些奇怪的行为。将其移到外面以解决问题。