Using css next variables globaly

Question

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]

score 3 · Accepted Answer · edited Sep 01 '16 at 10:16

3

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

edited Sep 01 '16 at 10:16

Ilja

44,142
92
275
498

answered Sep 01 '16 at 09:18

Edison Biba

4,384
3
17
33

MoOx · Answer 2 · 2021-10-11T07:07:34.113

Another solution if you want to share your variables with your JavaScript code, is to rely on postcss-custom-properties "variables" options.

Here is an example of a postcss-cssnext config to pass global variables

require("postcss-cssnext")({
  features: {
    customProperties: {
      variables: {
        mainColor: "red",
        altColor: "blue",
      }
    }
  }
})

https://cssnext.github.io/usage/#features

Using css next variables globaly

2 Answers2