Javascript 在ES6中加载SASS变量

如何在ES6文件中使用SASS变量

import base from '../../../styles/_base.scss'

const styles = {
  cardHeader: {
    backgroundColor: base.neutralColorLight  // Does not work
  }
}

<CardHeader style={styles.cardHeader} />

使用

节点sass-json-vars

npm包允许您在

@import

中指定json文件。由于您还可以

导入javascript中的

json文件，因此可以方便地在两者之间使用

要使用它，您需要使用NPM安装

节点sass json导入器

，并在命令行上将其指定为导入器：

./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/node-sass-json-importer.js MySASSFile.scss

在sass文件中，您不会指定变量，而是将变量留给json文件：

@import 'colors.json'

.neutral-thing {
  color: $neutral-color-light
}

{
  "neutral-color-light": "rgb(232, 232, 232)"
}

您可以在json文件中执行以下操作：

@import 'colors.json'

.neutral-thing {
  color: $neutral-color-light
}

{
  "neutral-color-light": "rgb(232, 232, 232)"
}

在JS文件中，只需导入json：

import colors from './colors.json'

const styles = {
  cardHeader: {
    backgroundColor: colors.neutral-color-light
  }
}

---

您是否尝试过

console.log（base）并检查您得到了什么？我不确定这是否是一个受支持的功能，但因为我不知道您的设置，所以我不能说。@nils结果为空。不知道我能做什么，很好。将试一试。最后一行行不通：
backgroundColor:colors。中性色灯光
。需要camelCase或quoting。对于gulp用户，您可以使用：