sass - 在全局范围内将sass包含在gatsby中

Question

我有以下项目结构:

gatsby-config.js
/src
  /components
    layout.jsx
    /button
      button.jsx
      button.scss
  /pages
  /styles
    styles.scss
    _mixins.scss
    _variables.scss

和 gatsby-config.js和 styles.scss分别通过以下方式配置:

...
plugins: [
...,
`gatsby-plugin-sass`
]
...

@import 'variables',
        'mixins';

为了访问mixin和变量，目前正在所有组件的scss文件中导入 styles.scss，例如:

//button.scss
@import './../styles/styles.scss'

这种方法有效，但是问题是，随着项目的发展， styles.scss被多次导入，并且这种方法似乎出了问题。
是否可以只导入 styles.scss一次，并使所有mixin和变量在所有组件中都可用？

Answer 1

您可以通过gatsby-plugin-sass将options传递给Sass。
以下选项可将./src/styles/_styles.scss的内容全局公开给项目中的每个Sass文件，而无需显式导入。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-sass',
      options: {
        data: `@import "${__dirname}/src/styles/styles";`,
      }
    },
  ],
}

注意:这对某些人可能是显而易见的，但值得将来的读者引用。
仅对仅包含变量，mixin，函数等的Sass文件执行此操作(除非使用了Sass功能，否则它们不会输出任何实际的CSS)。否则，您将获得在整个项目中重复多次的CSS。
Example repo