Ilja Ilja - 3 months ago 12
CSS Question

Using css next variables globaly

I have postcss parser set up with http://cssnext.io and am trying to figure out a way to set up a

variables.css
file to contain all my theme settings.

So far
variable.css
looks like this with a couple of vars

:root {
--color-white: #FFF;
--color-black: #000;
}


I than import it into my other files where I want to use these variables, so
@import './variables.css'
or similar and then use it in that file like
background-color: var(--color-white)
for example, however I get follwoing warning:


variable '--color-white' is undefined and used without a fallback
[postcss-custom-properties]

Answer

You can try to install postcss import

$ npm install postcss-import

Check this post for more details how to install.

EDIT Using postcss-import solved the issue, however there are currently issues with latest version, use v 7.x for stability