CSS variables not resolving when file is imported into another file

Question

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.

James Howell · Accepted Answer · 2018-02-06 14:29:29Z

2

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

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

answered Feb 6, 2018 at 14:29

James Howell

1,4725 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

intercoder Over a year ago

Thanks this fixed my problem

Collectives™ on Stack Overflow

CSS variables not resolving when file is imported into another file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related