在 Jacascript 中使用 CSS 模块变量

问题描述

我想知道是否有办法将 css-modules 中的颜色变量共享给我的 js (React) 组件？

如果不是，你会怎么做？有两个带有颜色变量的文件？

谢谢！

解决方法

CSS 没有变量 like Sass does 的概念，所以我假设您指的是 CSS custom properties，很多人将其称为“CSS 变量”。

这些自定义属性只是 - 自定义样式属性设置为特定元素，并且可以在运行时由 JS 通过 getComputedStyle + getPropertyValue 访问。举个例子：

const root = document.documentElement;
const div = document.querySelector('div');
const x = document.getElementById('x');

const get = (elt,key) => getComputedStyle(elt).getPropertyValue(key);

console.log(
  get(root,'--foo'),// 'Foo!'
  get(div,'--bar'),// 'Bar!'
  get(x,'--baz'),// 'Baz!'
  get(x,// 'Foo!' because properties cascade down
)

:root {
  --foo: 'Foo!';
}
div {
  --bar: 'Bar!';
}
#x {
  --baz: 'Baz!';
}

<div></div>
<div id="x"></div>

据我所知，没有官方的方法可以像您在 ESM 中所做的那样（例如 export const mainColor = '#ff0000';）从 CSS 文件中导出值。

然而，Sass 支持这一点，语法是 as follow 并且需要您使用的 sass 处理器的适当支持：

// colors.scss
:export {
  main-color: #ff0000;
}

import colors from './colors.scss';
console.log(colors['main-color']); // '#ff0000'