css - Gatsby .js CSS : custom properties

Question

我安装了 gatsby cli 并创建了一个基本的 node/gatsby.js 元素。教程说“Gatsby 开箱即用地使用 CSS 模块。”我还想按照此处所述使用自定义 css 属性:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

(1) 我创建了src/layouts/variables.css并放入带有自定义属性的 css，例如:

:root {
    --brand-color: #ff3333;
}

(2) 然后在src/layouts/index.css我添加了 @import './variables.css'在 css 文件的最顶部。

(3) 因为上面步骤中的@import，我安装并添加了postcss-import作为第一个插件，在我的 gatsby-config.js文件。不确定这是否正确，因为它不像其他插件那样被命名为“gatsby-plugin-*”。

(4) 在我的页脚组件 ( src/components/Footer ) 中，我同时拥有 index.js 和 index.module.css。在index.module.css我把:

.footer {
  color: var(--brand-color);
}

... 认为 --brand-color 将通过 src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> 我的页脚组件导入级联。

但是当我运行 gatsby-develop 时，它说:

./src/components/Footer/index.module.css 中的警告

postcss-custom-properties:/path/to/src/components/Footer/index.module.css:2:3: 变量 '--brand-color' 未定义且在没有后备的情况下使用。

如何解决这个错误？它不允许网站正常显示。

Answer 1

好吧，我知道我做错了什么:

每个需要使用“全局”variables.css 文件的 (.module).css 文件都必须显式导入它。

将 @import '../../layouts/variables.css'; 添加到我的组件的 css 文件中修复了这个问题。