csspostcsscssnext

Using css next variables globaly

I have postcss parser set up with http://cssnext.github.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]

Solution

  • 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