Gatsby.js css：自定义属性答案

【问题标题】：Gatsby.js css: custom propertiesGatsby.js css：自定义属性
【发布时间】：2018-09-08 00:09:29
【问题描述】：

我安装了 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我在css文件的最顶部添加了@import './variables.css'。

(3) 由于上述步骤中的@import，我在gatsby-config.js 文件中安装并添加了postcss-import 作为第一个插件。不确定这是否正确，因为它不像其他插件那样命名为“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' 未定义并且没有后备使用。

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

【问题讨论】：

【解决方案1】：

好的，我知道我做错了什么：

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

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

【讨论】：