scss 本身不支持直接读取或解析 json 文件，因其是纯静态编译器、无 i/o 能力；所谓“解析”实为构建工具（如 webpack + sass-loader）在编译前将 json 数据注入 sass 环境，并通过自定义函数暴露给 scss 使用。
SCSS 本身不支持直接读取或解析 JSON 文件，所有配置必须在编译时静态确定。所谓“解析 JSON”，实际是靠构建工具（如 Webpack + sass-loader）在编译前把 JSON 数据注入 Sass 环境，再通过自定义函数暴露给 SCSS 使用——不是 Sass 解析，而是 JavaScript 层预处理。
为什么不能在 SCSS 里用 @import 或 load-json() 读取 JSON
Sass 是纯静态编译器，没有 I/O 能力。任何试图在 .scss 文件中写 @import "config.json" 或调用未注册的 load-json() 函数，都会报错：Undefined function "load-json" 或 File to import not found。
常见错误现象：
- 把 JSON 放进
src/styles/config.json，然后在 SCSS 里写@use "config.json"→ 报错 “Can’t find stylesheet to import” - 在
_config.scss中写$theme: json-parse(file-read("theme.json"))→ Dart Sass 不支持file-read（仅旧版 LibSass 有实验性支持，且已废弃）
正确做法：用 sass-loader 的 functions 选项把 JSON 值透传进 Sass
核心思路是：在 Webpack 配置中读取 JSON，把它转成 JS 对象，再注册为 Sass 自定义函数，供 SCSS 调用。这样既安全，又兼容 Dart Sass（当前唯一维护的内核）。
实操步骤：
- 准备 JSON 配置，例如
src/theme/config.json：{ "colors": { "primary": "#3b82f6", "success": "#10b981" }, "spacing": { "sm": "0.5rem", "md": "1rem" } } - 在 Webpack 配置的
sassOptions.functions中注册函数："adjust-color($key)": (key) => { const config = require('../src/theme/config.json'); return new sass.types.String(config.colors[key.getValue()] || '#000'); } - SCSS 中即可使用：
$primary: adjust-color("primary");→ 编译后为color: #3b82f6;
注意点：
- 函数返回值必须是 Sass 类型（
sass.types.String、sass.types.Number等），不能直接 return JS 字符串 - JSON 路径需相对于 Webpack 配置文件（
webpack.config.js），不是相对于 SCSS 文件 - 每次修改 JSON 后需重启 Webpack dev server，因为
require()是编译时求值
@use + with 覆盖 JSON 配置比函数更轻量？不，它只适合静态覆盖
如果 JSON 配置只是项目级常量（比如主题色、断点），其实没必要走函数路径。更推荐用 @use "config" with 显式传入，前提是把 JSON 内容提前转成 SCSS 变量。
例如，在构建脚本中生成 src/styles/_generated-config.scss：
$color-primary: #{JSON.parse(fs.readFileSync('./theme/config.json')).colors.primary} !default;
然后在入口 SCSS 中：@use "generated-config" with ($color-primary: #ef4444);
这种方式的优势：
- 无需
sass-loader配置，开箱即用 - 支持热更新（配合
watch重新生成文件） - 变量可被 IDE 正确识别和跳转
但缺点也很明确：无法做运行时逻辑（比如根据屏幕宽度动态选色），所有值仍是编译期静态的。
真正容易被忽略的是：JSON 和 Sass 变量的语义边界。很多人想用 JSON 存“设计系统元数据”（如颜色语义名映射、响应式断点别名），结果发现 JSON 里写的 "md": "1rem" 在 SCSS 中无法参与计算（比如 $md * 2）。这时候必须用函数封装转换逻辑，或者干脆把 JSON 当作数据源，在构建时生成带单位的 Sass 变量——否则后期维护成本会指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
