CSS引入JSON变量：CSS-Modules导出方法

CSS本身无法直接引入或解析JSON变量，所谓“:export”并非原生CSS特性，而是CSS Modules在构建阶段（如Webpack、Vite）提供的编译期伪类语法，仅用于将扁平的键值对硬编码提取为JS对象供JavaScript导入，不支持嵌套、数组、外部JSON文件引用，也与CSS自定义属性（如var(--x)）完全无关；真正实现JSON驱动样式的可行路径只有两条：要么通过JS运行时读取JSON并动态注入CSS自定义属性，要么借助构建插件或预处理脚本在编译时将JSON映射为CSS变量——不存在“一行CSS引入JSON”的捷径，一切离不开JS或构建工具的介入。

CSS 本身不能引入或解析 JSON 变量，export 语法也不是 CSS 原生能力，而是 CSS Modules 在构建时（如 Webpack、Vite）提供的编译期特性，它导出的是 JS 对象，不是运行时的 CSS 变量。

为什么 :export 不是“在 CSS 中用 JSON”

:export 是 CSS Modules 的伪类写法，仅在启用 CSS Modules 的构建流程中生效。它不会把 JSON 注入 CSS，而是让构建工具将块内声明的键值对提取为一个 JS 对象，供 JavaScript 模块 import。例如：

:export {
  primaryColor: #007bff;
  spacingSm: 4px;
}

会被编译成类似这样的 JS：

module.exports = {
  "primaryColor": "#007bff",
  "spacingSm": "4px"
};

它不支持嵌套结构、数组、注释或任何 JSON 特性 —— 只接受扁平的键值对，且值必须是合法 CSS 字符串（不能是 true、null 或对象字面量）。

:export 能否导入外部 JSON 文件

不能。CSS 文件无法 @import 或 fetch JSON，:export 的内容必须硬编码在 CSS 文件内。常见误操作包括：

• 试图写 @import "./config.json"; → 语法错误，CSS 不识别 JSON
• 在 :export 中写 theme: url("./theme.json"); → 构建失败，:export 值不支持 url() 或动态引用
• 期望在 CSS 里用 var(--theme-primary) 读取 JSON 字段 → :export 和 CSS 自定义属性（:root { --x: y }）完全无关

真正可行的替代方案

如果目标是“用 JSON 配置驱动样式”，需拆分职责：

• 把主题/配置放在 theme.json 中，由 JS 加载并注入 CSS 自定义属性：
  document.documentElement.style.setProperty('--primary', data.primaryColor);
• 用构建插件（如 vite-plugin-css-vars 或 webpack-plugin-css-variables）在编译时把 JSON 映射为 :root 变量
• 若坚持用 CSS Modules，可写脚本预处理：读取 JSON，生成带 :export 的 theme.module.css 文件，再 import

没有“一行 CSS 引入 JSON”的路径。所有方案都依赖 JS 运行时或构建时介入。

关键点容易被忽略：CSS Modules 的 :export 是构建产物，不是样式逻辑；JSON 到样式的映射必须发生在 JS 层或构建配置层，而不是 CSS 文件内部。

到这里，我们也就讲完了《CSS引入JSON变量：CSS-Modules导出方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！