如何用JS从JSON文件设置CSS :root变量？哪种方案更灵活？

一、JSON文件格式修正 #

首先需要将你提供的JSON调整为标准格式（中文引号改为英文引号，键值对添加逗号）：

{
  "--design-white": "#f1f2f9",
  "--main-flamingo": "#8e24aa"
}

二、具体实现方案 #

方案1：使用fetch动态加载JSON文件 #

这是最通用的方案，无需依赖构建工具，直接在浏览器环境运行：

// 加载JSON并应用CSS根变量
fetch('./css-vars.json')
  .then(response => {
    if (!response.ok) throw new Error('JSON文件加载失败');
    return response.json();
  })
  .then(cssVars => {
    const root = document.documentElement;
    // 遍历变量对象，将所有键值对设置到:root
    Object.entries(cssVars).forEach(([varName, value]) => {
      root.style.setProperty(varName, value);
    });
  })
  .catch(error => console.error('应用CSS变量出错:', error));

方案2：ES模块导入JSON（需构建工具或现代浏览器支持） #

如果你的项目使用Vite、Webpack等构建工具，或者目标浏览器支持导入断言，可以直接导入JSON：

// 现代浏览器原生支持的导入方式（需添加断言）
import cssVars from './css-vars.json' assert { type: 'json' };

// 构建工具环境下可直接导入（无需断言）
// import cssVars from './css-vars.json';

const root = document.documentElement;
Object.entries(cssVars).forEach(([varName, value]) => {
  root.style.setProperty(varName, value);
});

三、哪种方案更灵活？ #

fetch动态加载方案的灵活性更高，核心原因如下：

• 无构建工具依赖：纯静态HTML项目就能直接使用，无需配置打包流程
• 动态切换能力：可根据场景（如主题切换、用户偏好设置）加载不同的JSON变量文件，比如点击按钮切换深色/浅色主题对应的变量文件
• 运行时可控：可以在特定时机（如页面加载完成、用户交互后）触发加载，甚至重新加载变量更新样式
• 错误处理更灵活：能明确捕获文件加载失败、JSON解析错误等情况，方便做降级处理

ES模块导入方案更适合变量固定的场景，优点是加载速度快（无额外网络请求）、代码整合性好，但动态调整的能力较弱，即使结合import()动态导入语法，复杂度也会高于fetch方案。

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