CODEWITHSUNDEEP
csspostcsscssnext
Ilja
Ilja

Reputation: 46527

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]

Upvotes: 8

Views: 3559

Answers (2)

MoOx
MoOx

Reputation: 8991

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

Upvotes: 2

Edison Biba
Edison Biba

Reputation: 4443

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

Upvotes: 3

Related Questions