create-react-app - 将文件导入另一个文件时，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 块无法渲染。