如何从全局color_variables.css中提取页面渲染组件所需的CSS变量

现有代码示例 #

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);
}

解决方案 #

完全可以实现，主要有两类实现路径，按需选择即可：

1. 构建时处理（推荐，性能最优）

这个方案在打包阶段就完成变量的按需提取，不会产生额外运行时开销：

• 用PostCSS插件实现：直接安装postcss-dropunusedvars插件，在PostCSS配置里开启变量清理功能，配置源变量文件路径后，插件会自动扫描所有打包引入的样式文件，识别用到的CSS变量，自动删除color_variables.css里未被引用的变量，打包后只会保留用到的变量部分。
• 自定义构建插件：如果用Vite/Webpack，可以写个简单的自定义插件，逻辑如下：
  1. 打包时扫描当前入口所有引入的样式、组件文件，正则匹配提取所有var(--xxx)格式的变量名
  2. 解析color_variables.css的所有变量键值对，过滤出前面收集到的用到的变量
  3. 把过滤后的变量注入到打包产物的头部，替换原有的全量变量文件引入即可

2. 运行时处理（适合无法修改构建流程的场景）

如果暂时没法改构建配置，可以用前端JS逻辑实现动态按需注入：

// 第一步：提取当前页面所有用到的CSS变量
const usedCssVars = new Set()
// 遍历所有已加载的样式表
for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      const varMatches = rule.cssText?.match(/var\((--[\w-]+)\)/g)
      varMatches?.forEach(match => {
        const varName = match.match(/--[\w-]+/)[0]
        usedCssVars.add(varName)
      })
    }
  } catch (err) {
    // 跨域样式表无权限读取，直接跳过即可
  }
}

// 第二步：拉取全局变量文件，按需注入
fetch('/path/to/color_variables.css')
  .then(res => res.text())
  .then(cssContent => {
    const varReg = /(--[\w-]+)\s*:\s*([^;]+);/g
    const validVars = []
    let match
    while ((match = varReg.exec(cssContent))) {
      const [, varName, varValue] = match
      if (usedCssVars.has(varName)) {
        validVars.push(`${varName}: ${varValue};`)
      }
    }
    // 生成样式标签插入页面
    const styleEl = document.createElement('style')
    styleEl.textContent = `[data-theme='default'] { ${validVars.join('')} }`
    document.head.appendChild(styleEl)
  })

这段代码会自动识别当前页面用到的变量，只注入需要的部分，不需要引入全量的color_variables.css。

内容的提问来源于stack exchange，提问作者Karuppiah RK