webpack下node-sass-json-importer导入分层JSON到SASS取值方法咨询

• node-sass-json-importer 对两类JSON结构的解析逻辑存在固定差异：
  • 扁平结构JSON：每个顶层键会直接映射为独立的Sass标量变量（数字、字符串等可直接作为CSS值的类型），因此可直接通过$变量名读取使用。
  • 嵌套结构JSON：每一层嵌套的JSON对象，会被转换为Sass原生的Map数据结构，不支持JS式点语法链式访问。
• 两类无效写法的报错原因：
  • 编写$aaa: $part1时，Sass会尝试将完整的Map对象作为普通CSS值输出，因Map不属于合法CSS值范围，抛出(var1: 12, var2: 31) isn't a valid CSS value的类型错误。
  • 编写$aaa: $part1.var1时，Sass语法本身不支持以点号作为Map的取值分隔符，解析到点号位置时会因无法识别合法表达式，抛出“$aaa: $part1”后期望合法表达式的语法错误。

方案1：基于默认解析规则，用Sass原生Map语法取值 #

无需修改原有webpack配置，仅需在SCSS文件中使用Sass内置的map-get函数读取嵌套层级的值：

• 单一层级嵌套读取：获取JSON中part1.var1对应值的写法为$aaa: map-get($part1, var1);
• 多层嵌套读取：嵌套调用map-get即可，比如针对结构{"a": {"b": {"c": 10}}}，读取值的写法为$aaa: map-get(map-get(map-get($a, b), c));
  *注意：Map类型本身不能直接作为CSS属性值输出，必须通过map-get取出内部的标量值后再使用。

方案2：启用导入器扁平化配置，对齐扁平JSON的使用体验 #

如果不想在业务代码中书写多层map-get，可以调整webpack中node-sass-json-importer的初始化参数，开启扁平化解析模式：

• 调整sass-loader配置，初始化importer时传入{flatten: true}参数，导入器会自动递归遍历嵌套JSON的每一层，将嵌套路径的键用-连接拼接成顶层的扁平Sass变量。配置示例：

  // 调整前（未开启扁平化）
  options: {
    importer: jsonImporter
  }
  
  // 调整后（开启扁平化）
  options: {
    importer: jsonImporter({ flatten: true })
  }
  

• 原嵌套结构{"part1": {"var1": 12, "var2": 31}}，开启扁平化后会自动生成两个可直接引用的顶层Sass变量：
  • $part1-var1: 12;
  • $part1-var2: 31;
• 此时可直接复用扁平JSON的变量引用逻辑，通过$aaa: $part1-var1读取值，无需处理Map结构。

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