将文件导入另一个文件时，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项目没有通过post-css插件运行这个导入的css文件。似乎有很多关于如何正确配置Webpack以使用PostCSS的过时建议。任何建议都会很棒。

Answer 1

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

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