在Javascript中使用CSS-modules变量

Question

我想知道是否有一种方法我可以分享我的颜色变量在css模块到我的js (React)组件?

如果没有，你会怎么做?有两个文件与颜色变量?

谢谢!

Answer 1

CSS不像Sass那样有变量的概念，所以我假设你指的是CSS自定义属性，也就是很多人所说的"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>

据我所知，没有官方的方式从CSS文件导出值的方式类似于你在ESM(如export const mainColor = '#ff0000';)。

Sass支持这一点，语法如下，需要你正在使用的Sass处理器的适当支持:

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

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