Переменные CSS не разрешаются при импорте файла в другой файл

Question

Я работаю над проектом, в котором я разрабатываю набор компонентов пользовательского интерфейса, которые разработчики могут использовать для создания своих сайтов. Я создал пакет NPM, который состоит только из CSS, необходимого для реализации компонента Accordion.

Я установил свой css-accordion-компонент как зависимость для разработки через npm install в проект React, созданный с помощью create-реагировать-приложение. Мой файл Accordion.js в проекте React импортирует пакет css-accordion из node_modules следующим образом:

import "css-accordion-component/lib/accordion.css";

Это вносит стили в мой проект, но ни одна из переменных CSS, определенных и используемых в файле, не разрешается. Файл CSS выглядит так:

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

.Accordion {
    background-color: var(--Accordion-bgColor);
}

Я полагаю, что это может быть из-за того, что проект React, созданный с помощью create-response-app, не запускает этот импортированный файл css через свои плагины post-css. Кажется, в Интернете есть много устаревших советов о том, как правильно настроить Webpack для использования PostCSS. Любой совет был бы действительно хорош.

Answer 1

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

^^ Точка с запятой здесь оказалась проблемой. Это привело к тому, что весь блок root не отображался.