我安装了gatsby cli并创建了一个基本节点/ 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 作为第一个插件 . 不确定这是否正确，因为它不像其他插件那样't named ' 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时，它说：
warning in ./src/components/Footer/index.module.css
postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.
我该如何解决这个错误？它不允许网站正常显示 .
1 回答
好的我弄清楚我做错了什么：
需要使用“global”variables.css文件的每个（.module）.css文件都必须显式导入它 .
将
@import '../../layouts/variables.css';添加到我的组件的css文件中修复此问题 .