CODEWITHSUNDEEP
create-react-apppostcsspostcss-loaderpostcss-import
James Howell
James Howell

Reputation: 1442

CSS variables not resolving when file is imported into another file

I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component.

I installed my css-accordion-component as a development dependency via npm install to a React project created using create-react-app. My Accordion.js file in the React project imports the css-accordion package from node_modules like so:

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

This does bring the styles into my project but none of the CSS Variables defined and used in the file are resolving. The CSS file looks like so:

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

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

I believe it may be because the React project built with create-react-app is not running this imported css file through its post-css plugins. There seems to be a lot of out of date advice online about how to correctly configure Webpack to use PostCSS. Any advice would be really great.

Upvotes: 3

Views: 3730

Answers (1)

James Howell
James Howell

Reputation: 1442

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

^^ The semi-colon here proved to be the problem. It caused the whole :root block to fail to render.

Upvotes: 2

Related Questions