How to use global variables in CSS-Modules?

This is how you do it with vanilla CSS Modules

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


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

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