在Jacascript中使用CSS-modules变量

Question

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

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

谢谢!

Answer 1

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'), // 'Foo!' because properties cascade down
)

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

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

​

据我所知，还没有像在ESM中那样从CSS文件中导出值的官方方法(例如export const mainColor = '#ff0000';)。

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

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

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