Import variables into css module in React

Question

I use CSS modules and my css/stylesheet files live next to my components.

What is the fastest way to support a global colors file that can be imported into my stylesheet?

Does my css-modules and webpack support this by default? Help.

NTP · Accepted Answer · 2018-03-05 04:25:32Z

4

Are you using CRA? If so, you can. You just have to make sure that you are using postcss and the postcss-modules-values plugin. NOTE: Haven't tested this without Create React App (yet), so if anyone has, it would help to know.

Now, all you need is create a stylesheet (or simply use the index.css, your choice), and do this:

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

And now, from your component-scoped css file, just import and use (almost JS-like):

/* import your colors... */
@value colors: "./colors.css";
@value blue, red, green from colors;

.button {
  color: blue;
  display: inline-block;
}

Source(docs).

answered Mar 5, 2018 at 4:25

NTP

3991 gold badge3 silver badges11 bronze badges

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

1 Comment

NTP Over a year ago

Of course you can also make it shorter, for example like this: @value yourBlue, yourOtherColor from "../../index.css"; Your preference.

Collectives™ on Stack Overflow

Import variables into css module in React

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