Sass 无法直接遍历 JSON 文件，因其编译时无 I/O 能力；必须通过构建工具（如 Node.js 脚本）将 JSON 转为 SCSS 变量文件（如 _tokens.scss），再用 @use 导入使用。
不能直接用 Sass 遍历 JSON 文件——Sass 本身不支持读取外部 JSON，编译时无 I/O 能力，所谓“遍历 JSON 自动生成 CSS”必须借助构建工具链中转。
为什么 @import 或 @use 加载 JSON 会报错
Sass 的 @import（已弃用）和 @use 只能加载其他 .scss 或 .sass 文件，对 .json 文件完全无感知；尝试写 @use "config.json" 会直接触发 File to import not found 错误。
- Sass 是纯静态编译器，运行在无环境上下文的 CSS 构建阶段，不接触文件系统
- JSON 配置需在构建前被解析、转换为 Sass 可消费的格式（如
_variables.scss） - 常见错误是把 Webpack/Vite 插件能力误认为 Sass 原生能力
推荐方案：用 Node.js 脚本将 JSON 转成 Sass 变量文件
这是最可控、兼容性最好、调试最直观的方式。核心逻辑是：读取 design-tokens.json → 格式化为 SCSS 变量声明 → 写入 src/styles/_tokens.scss。
示例脚本（scripts/generate-tokens.js）：
立即学习“前端免费学习笔记（深入）”；
const fs = require('fs');
const tokens = JSON.parse(fs.readFileSync('design-tokens.json', 'utf8'));
let scss = '// Auto-generated from design-tokens.json\n';
Object.entries(tokens).forEach(([category, values]) => {
scss += `\n// ${category}\n`;
Object.entries(values).forEach(([key, value]) => {
scss += `$${category}-${key}: ${JSON.stringify(value)};\n`;
});
});
fs.writeFileSync('src/styles/_tokens.scss', scss);
- 执行
node scripts/generate-tokens.js后，就能在 Sass 中@use "styles/tokens"并使用$color-primary等变量 - 注意字符串值要用
JSON.stringify()包裹，否则颜色值"#007bff"会变成未加引号的非法 Sass 语法 - 若 JSON 含嵌套结构（如
{"spacing": {"sm": "0.25rem", "md": "0.5rem"}}），需递归扁平化或生成嵌套 map，避免生成无效变量名
Vite / Webpack 中自动触发生成的要点
手动跑脚本容易遗漏，应集成进开发流程。关键不是“让 Sass 读 JSON”，而是“让构建工具在 Sass 编译前准备好变量文件”。
- Vite：在
vite.config.js的build.watch或插件buildStart钩子中调用生成脚本（推荐用esbuild-plugin-sass-json类轻量插件，但本质仍是预处理） - Webpack：用
webpack.DefinePlugin不适用（它注入 JS 字符串），应改用copy-webpack-plugin+ 自定义 script，或更稳妥地在npm run build的prebuild脚本里执行生成 - 务必把
_tokens.scss加入 Git，方便团队共享一致输出；同时将design-tokens.json设为唯一权威源，避免反向修改 SCSS 导致不一致
真正难的不是写几行转换代码，而是维护 JSON Schema 和变量命名约定的一致性——比如 border-radius 在 JSON 里叫 radius 还是 borderRadius，是否允许单位缩写（sm vs small），这些决策一旦定下，就会影响所有下游消费方，且很难回溯修正。
