How to use global variables in CSS-Modules?

reactjs webpack css-modules
user818700 picture user818700 · Nov 24, 2016 · Viewed 23k times · Source

I'm busy learning React with CSS-Modules and I don't quite understand how one would store variables? For example, in Sass you're able to do this:

// _variables.scss
$primary-color: #f1f1f1; 

// heading.scss
@import './variables';
.heading {
  color: $primary-color
}

How do you achieve this in CSS Modules?

Answer

Mantas picture Mantas · Apr 21, 2019

Check this out

//vars.css
:root {
  --color-black: #222;
}


//myComponent.module.css
@import './vars.css';

.component{
  color: var(--color-black);
}

Related questions

How to import CSS modules with Typescript, React and Webpack

How to import CSS modules in Typescript with Webpack? Generate (or auto-generate) .d.ts files for CSS? And use classic Typescript import statement? With ./styles.css.d.ts: import * as styles from './styles.css' Import using require Webpack function? …

Read More
Module not found: Can't resolve 'style'

I am trying to configure css modules using sass. I have followed some tutorials but none seem to work. The webpack config was mostly created by create-react-scripts. I seemed to getting this error "Module not found: Can't resolve 'style'" Any …

Read More
Sass with CSS Modules & Webpack

I've been building a project for a while using Webpack, Sass, and CSS modules. Normally in my .scss files, I define a class like: :local(.button) { color: white; } and in my React components, in the render method, I require the …

Read More