将嵌套的 SCSS 映射导出为 Json答案

【问题标题】：Export Nested SCSS Map to Json将嵌套的 SCSS 映射导出为 Json
【发布时间】：2018-05-24 20:28:54
【问题描述】：

我正在尝试将我的 scss 导出到 JSON npm package sass-export

我可以成功导出变量并映射一层深，但问题是我有一个两层深的颜色图（显示的只是其中有很多颜色的第一部分）。抛出的错误是关于未闭合的括号。一切对我来说似乎都很好，我已经按照文档导出地图，但我找不到有关该主题的更多信息。感谢您提供的任何见解。

成功导出

$z-index: (
 "below-base": -1,
 "base":0,
 "xs": 100,
 "sm": 200,
 "md": 300,
 "lg": 400,
 "xl": 500
);

控制台输出

mapValue:Array(7)
0: {name: "below-base", value: "-1", compiledValue: "-1"}
1: {name: "base", value: "0", compiledValue: "0"}
2: {name: "xs", value: "100", compiledValue: "100"}
3: {name: "sm", value: "200", compiledValue: "200"}
4: {name: "md", value: "300", compiledValue: "300"}
5: {name: "lg", value: "400", compiledValue: "400"}
6: {name: "xl", value: "500", compiledValue: "500"}

不成功

$colour-palette: (
   gray: (
     0: #0D0D0D,
     1: #1A1A1A,
     2: #262626,
     3: #333333,
     4: #5C5C5C,
     5: #858585,
     6: #ADADAD,
     7: #D4D6DB
   ),
 );

终端错误输出

{ Error: unclosed parenthesis
    at Object.module.exports.renderSync (C:\Users\tbilcke\Documents\repos\node_modules\node-sass\lib\index.js:439:16)
  status: 1,
  file: 'stdin',
  line: 193,
  column: 34,
  message: 'unclosed parenthesis',
  formatted: 'Error: unclosed parenthesis\n        on line 193 of stdin\n>> #sass-export-id.gray{content:"#{(0: #0D0D0D}";}\n   ---------------------------------^\n' }

控制台输出

colour-palette: Array(1)
 0:
    compiledValue:"(gray: (0: #0D0D0D, 1: #1A1A1A, 2: #262626, 3: #333333, 4: #5C5C5C, 5: #858585, 6: #ADADAD, 7: #D4D6DB))"
    mapValue: Array(1)
    0: {name: "gray", value: "(0: #0D0D0D", compiledValue: ""}
        length:1
        __proto__: Array(0)
    name: "$colour-palette"
    value :
"(gray: (0: #0D0D0D,1: #1A1A1A,2: #262626,3: $gray-base,4: #5C5C5C,5: #858585,6: #ADADAD,7: #D4D6DB),)"

Sass 导出 - 工作

let __root = path.join(__dirname, '../')
let __src = path.join(__dirname, '../src')

let exportPath = path.join(__src, 'scss/_test_cars.scss')
let importPath = path.join(__src, 'scss/')

let options = {
  inputFiles: [exportPath],
  includePaths: [importPath]
}
let asObject = exporter(options).getStructured()
process.env.styles = JSON.stringify(asObject)

【问题讨论】：

标签： json sass export

【解决方案1】：

我最近遇到了同样的问题，并设法通过相对轻松的解决方法解决了它。

如果你把你的子数组像这样分开；

$colour-palette-gray: (
    0: #0D0D0D,
    1: #1A1A1A,
    2: #262626,
    3: #333333,
    4: #5C5C5C,
    5: #858585,
    6: #ADADAD,
    7: #D4D6DB
);

然后在单独的 scss 文件中（您不会使用 sass-export 观察到）将它们加载到父数组中

$colour-palette: (
    'grey': $colour-palette-gray,
    'blue': $colour-palette-blue,
    'pink': $colour-palette-pink
);

您还可以使用每个子数组声明上方的特殊注释语法来确保 JSON 中的节点被正确标记；

/**
 * @sass-export-section="brand-colors"
 */

我正在以这种方式使用gulp implementation of the module，它可以正常工作

【讨论】：