Gatsby.js css：自定义属性

Question

我安装了gatsby cli并创建了一个基本节点/ gatsby.js项目。 教程说＆＃34; Gatsby使用CSS模块开箱即用。＆＃34; 我还想使用如下所述的自定义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，我在我的postcss-import文件中安装并添加了gatsby-config.js作为第一个插件。不确定这是否正确，因为它没有被命名为＆＃39; gatsby-plugin - *＆＃39;像其他插件一样。

（4）在我的页脚组件（src/components/Footer）中我有index.js和index.module.css。在我提出的index.module.css中：

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

...认为--brand-color将通过src / variables.css进口级联 - ＆gt; src / index.css - ＆gt; src / index.js - ＆gt; layouts / index.js - ＆gt;我的页脚组件。

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

./src/components/Footer/index.module.css

中的

警告

postcss-custom-properties：/path/to/src/components/Footer/index.module.css:2:3：变量＆＃39; - 品牌颜色＆＃39;是未定义的，没有后备使用。

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

Answer 1

好的我弄清楚我做错了什么：

需要使用“global”variables.css文件的每个（.module）.css文件必须明确地导入它。

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