将文件导入另一个文件时，CSS变量未解析

Posted 2023-03-06

【中文标题】将文件导入另一个文件时，CSS变量未解析

【英文标题】：CSS variables not resolving when file is imported into another file

【发布时间】：2018-07-16 13:11:36

【问题描述】：

我正在从事一个项目，我正在开发一组 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 的过时建议。任何建议都会非常棒。

【参考方案1】：

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

^^ 这里的分号被证明是问题所在。它导致整个 :root 块无法渲染。

【讨论】：

感谢这解决了我的问题