如何通过JSON配置CSS变量？求复刻StreamElements同款功能

核心思路就是把JSON里的键值对，批量替换掉CSS模板里的{{变量名}}占位符，下面用JavaScript实现具体逻辑：

1. 准备基础素材 #

首先你需要两个核心文件/内容：

• 配置用的扁平JSON：

{
  "borderColor": "red",
  "bgColor": "#f5f5f5",
  "fontSize": "16px"
}

• 带占位符的CSS模板：

.container {
  border: solid 10px {{borderColor}};
  background-color: {{bgColor}};
}
.text {
  font-size: {{fontSize}};
}

2. 实现替换逻辑 #

写一个简单的替换函数，遍历JSON的所有键，用正则匹配并替换对应的占位符：

function generateCSS(config, cssTemplate) {
  let finalCSS = cssTemplate;
  // 遍历JSON配置的每个键值对
  for (const [key, value] of Object.entries(config)) {
    // 用正则匹配{{key}}格式的占位符，全局替换
    const regex = new RegExp(`{{${key}}}`, 'g');
    finalCSS = finalCSS.replace(regex, value);
  }
  return finalCSS;
}

// 使用示例
const config = {
  "borderColor": "red",
  "bgColor": "#f5f5f5",
  "fontSize": "16px"
};

const cssTemplate = `
.container {
  border: solid 10px {{borderColor}};
  background-color: {{bgColor}};
}
.text {
  font-size: {{fontSize}};
}
`;

const finalCSS = generateCSS(config, cssTemplate);
console.log(finalCSS);

3. 实际场景应用 #

• 浏览器端：可以把JSON存在本地存储或者通过接口获取，CSS模板可以写在<template>标签里，替换后动态插入<style>标签到页面
• Node.js端：可以用fs模块读取JSON文件和CSS模板文件，替换后写入最终的CSS文件

这个逻辑和StreamElements插件的核心原理一致，就是简单的字符串替换，不需要复杂的库，自己写几行代码就能搞定。

内容的提问来源于stack exchange，提问作者h-k-dev