在 gatsby 中全局包含 sass

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

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

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

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

Answer 1

您可以通过.sass将选项传递给 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。

示例存储库

Answer 2

向您的组件全局提供 SCSS 变量

\n

\n
• 和@use
\n
• SCSS语法
\n
• gatsby 插件 sass
\n
• 具有 CSS 模块的组件范围样式
\n

\n

gatsby-插件-sass 配置

\n

gatsby-config.js文件：

\n

{\n  resolve: `gatsby-plugin-sass`,\n  options: {\n    implementation: require("sass"),\n    data: `@use "${__dirname}/src/global-styles/variables" as var;`\n  }\n},\n

\n

var将用作命名空间。

\n

为您的 scss 文件提供变量

\n

./src/global-styles/_variables.scss\n./src/components/main.jsx\n./src/components/main.module.scss\n

\n

_variables.scss有关,部分中下划线的信息。

\n

_variables.scss文件：

\n

$color-1: red;\n$color-2: blue;\n

\n

main.jsx文件：

\n

import React from \'react\'\nimport style from \'./main.module.scss\'\n\nconst Main = () => (\n    <div className={style.main}>Content</div>\n)\n\nexport default Main\n

\n

main.module.scss文件：

\n

.main {\n    color: var.$color-1;\n}\n\n

\n

但我需要暴露一些全局样式gatsby-browser.js

\n

好吧，您将需要@use或遵循@import中使用的其他答案gatsby-config.js。混合@import可能@use不起作用，因为：

\n

\n

小心！

\n

stylesheet\xe2\x80\x99s @use 规则必须位于除 @forward 之外的任何规则之前，包括样式规则。但是，您可以在@use规则之前声明变量以在配置模块时使用。

\n

https://sass-lang.com/documentation/at-rules/use

\n

\n

我停止使用@import，只使用@use。

\n

global-styles.scss文件：

\n

@use "./variables" as var;\n\nbody {\n    color: var.$color-2;\n}\n

\n

gatsby-browser.js文件：

\n

import \'./src/global-styles/global-styles.scss\'\n

\n