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

Question

我正在从事一个项目，在该项目中，我正在开发一组UI组件，以供开发人员用于构建其网站。我创建了一个NPM软件包，该软件包仅由实现手风琴组件所需的CSS组成。

我通过NPM安装了使用Create-react-app创建的React项目，将CSS-Accordion-Component作为开发依赖性安装为开发依赖性。我的Accileion.js文件在React Project中从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;
};

^^这里的半颜色被证明是问题。它导致整个：根块无法渲染。