reactjs - 如何在 CSS 模块中使用全局变量？

Question

我正忙于学习 React 和 CSS 模块，但我不太明白如何存储变量？例如，在 Sass 中您可以执行以下操作:

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

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

如何在 CSS 模块中实现这一目标？

Answer 1

这就是使用普通 CSS 模块的方法

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


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

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