Question

我正在尝试将我的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 Export - Working

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)

Answer 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，并且可以按需运行

将嵌套的SCSS Map导出到Json

1 个答案: