从全局颜色变量文件中仅获取渲染的组件颜色变量答案

【问题标题】：get only rendered component color variables from global color variable file从全局颜色变量文件中仅获取渲染的组件颜色变量
【发布时间】：2021-08-31 10:08:19
【问题描述】：

color_variables.css：

[data-theme='default'] {
  --avatar_bg: #000;
  --avatar_text: #fff;
  --avatar_border: red;
  --button_bg: blue;
  --button_text: #fff;
  --button_border: darkblue;
  --modal_widget_bg: orange;
  --footer_bg: yellow;
  --footer_text: #000; 
}

avatar.css：

.avatar {
  background-color: var(--avatar_bg);
  color: var(--avatar_text);
  border: 1px solid var(--avatar_border);
}

button.css：

.button {
  background-color: var(--button_bg);
  color: var(--button_text);
  border: 1px solid var(--button_border);
}

我们为所有组件（头像、按钮、页脚、选项卡等）提供了一个 color_variables.css 文件。例如：我有一个只呈现头像组件的页面，它呈现 avatar.js 和 avatar.module.css 文件。因此，其他不必要的组件将不会在该页面中呈现。

我的问题是，有没有办法从 color_variables.css 文件中选择使用的变量。我说我有一个只呈现头像组件的页面。所以，我想从 color_variables.css 文件中获取这三个变量（--avatar_bg、--avatar_text、--avatar_border）的颜色值。我不需要该页面中的按钮颜色变量和其他不必要的颜色变量。有没有办法只选择需要的颜色变量？（我不想拆分那个全局变量文件）

【问题讨论】：

我看不出这可以如何自动完成，因为系统在加载时不知道以后是否可能会使用任何其他变量，例如通过 JS 将它们设置为元素。
如果你需要实现这一点，我认为你可能需要使用像 Tailwindcss 这样的框架。
可以创建一个js文件。 colorvar.js 并将值分配给这些变量。然后你可以在任何你想要的地方导入脚本。并使用这些变量值

标签： javascript css reactjs npm

【解决方案1】：

您可以只从父组件发送您需要的 CSS 变量，让它处理“读取”并将变量分配给需要它们的组件

【讨论】：

【解决方案2】：

您只需在 index.js 或 app.js 中导入 color_variables.css，以便所有其他组件从 color_variables.css 中检测到您的 css

【讨论】：