将文件导入到另一个文件时，CSS变量无法解析

Question

我在一个项目中工作，我正在开发一组UI组件，供开发人员用来构建他们的网站。我已经创建了一个NPM包，它只包含实现Accordion组件所需的CSS。

我通过npm install将css-accordion-component作为开发依赖项安装到使用create- React -app创建的react项目中。我的React项目中的Accordion.js文件从node_modules导入css-accordion包，如下所示：

import "css-accordion-component/lib/accordion.css";

这确实会将样式带到我的项目中，但在文件中定义和使用的CSS变量都不会被解析。CSS文件如下所示：

:root {
    --Accordion-bgColor: #fff;
};

.Accordion {
    background-color: var(--Accordion-bgColor);
}

我相信这可能是因为使用create- React -app构建的react项目没有通过其后css插件运行这个导入的css文件。关于如何正确配置Webpack来使用PostCSS，网上似乎有很多过时的建议。任何建议都是非常好的。

Answer 1

:root {
    --Accordion-bgColor: #fff;
};

^^这里的分号就是问题所在。它导致整个:root块无法呈现。