How to create a global settings file in react css modules

Question

I want to have a file just to store the colors and some other settings that I am going to use in my css styles. Because I don't want to specify the same color in different files multiple times. How can I achieve that with css modules?

For example: setting.css

$primary-color: #785372;
$secondary-corlor: #22b390;

Button/styles.css

.button {
  background: $primary-color;
  display: flex;
}

Pascal Duez · Accepted Answer · 2016-10-23 08:39:20Z

0

From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables.

@import 'path/to/variables.scss';

If there's no Sass involved then postcss-modules-values is what your looking for:

variables.css

@value primary: #785372;
@value secondary: #22b390;

styles.css

@value primary, secondary from './path/to/variables.css';

.button {
  background: primary;
  display: flex;
}

EDIT:
Actually there's even more options, still through PostCSS plugins. postcss-simple-vars or postcss-custom-properties, the later having the clear advantage to stay close to the CSS specification. They all share the same requirement though, importing the configuration file in a way or another.

edited Oct 23, 2016 at 8:39

answered Oct 20, 2016 at 18:18

Pascal Duez

7115 silver badges7 bronze badges

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

3 Comments

Bruce Mu Over a year ago

Thank you. I will check it out.

devellopah Over a year ago

import it into your App.scss file (i bet you have that one)

Pascal Duez Over a year ago

CSS modules are processed per file, and not from a root file importing all the partials like Sass does. So this won't work. The partial with variables needs to be imported in each module file (if needed).

aurelia · Accepted Answer · 2021-11-09 21:04:46Z

0

You can do this with using CSS Custom Properties (here's a tutorial I've found).

In your settings.css file, do (the `:root':

:root {
    --primary-color: #785372;
    --secondary-corlor: #22b390;
}

Then, you can use those constants in the same, or a different file

.container {
    color: var(--primary-color);
}

If you're using them in a different file, be sure to import both stylesheets, for example:

import './Button/styles.css'
import './settings.css'

Also, according to this answer, you can do this in html as well, by linking the two stylesheets:

<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">

answered Nov 9, 2021 at 21:04

aurelia

7071 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to create a global settings file in react css modules

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related