在 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'