时间戳

首页 > 解决方案 > 在 gatsby 中全局包含 sass

sass - 在 gatsby 中全局包含 sass

问题描述

我有以下项目结构：

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';

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

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

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

标签： sassgatsby

解决方案

您可以通过 将选项传递给 Sass gatsby-plugin-sass。

以下选项将全局公开./src/styles/_styles.scss项目中每个 Sass 文件的内容，而无需显式导入它。

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

注意：以下内容对某些人来说可能很明显，但对于未来的读者来说值得一提。

仅对仅包含变量、mixin、函数等的 Sass 文件执行此操作（在使用之前不会输出任何实际 CSS 的 Sass 功能）。否则，您最终会得到在您的项目中重复多次的 CSS。

示例回购

推荐阅读