create-react-app - ファイルが別のファイルにインポートされたときに CSS 変数が解決されない

Question

私は、開発者がサイトを構築するために使用する一連の UI コンポーネントを開発しているプロジェクトに取り組んでいます。Accordion コンポーネントを実装するために必要な CSS だけで構成される NPM パッケージを作成しました。

create-react-app を使用して作成された React プロジェクトに、npm install を介して css-accordion-component を開発依存関係としてインストールしました。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 ファイルを post-css プラグインを介して実行していないことが原因である可能性があると思います。PostCSS を使用するように Webpack を正しく構成する方法については、オンラインで時代遅れのアドバイスがたくさんあるようです。どんなアドバイスも本当に素晴らしいでしょう。