0

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.

user2355058
  • 211
  • 3
  • 15

1 Answers1

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).

NTP
  • 361
  • 1
  • 3
  • 11
  • 3
    Of course you can also make it shorter, for example like this: @value yourBlue, yourOtherColor from "../../index.css"; Your preference. – NTP Mar 05 '18 at 04:41