在 Jacascript 中使用 CSS 模块变量

Question

我想知道是否有一种方法可以将 css-modules 中的颜色变量共享给我的 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'