javascript - 在 ES6 中加载 SASS 变量

Question

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

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

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

<CardHeader style={styles.cardHeader} />

样式表:

// _base.scss

$neutral-color-light: rgb(232, 232, 232);

Answer 1

使用node-sass-json-vars

npm 包 node-sass-json-vars允许您在 @import 中指定 json 文件。由于您还可以在 javascript 中导入 json 文件，因此可以轻松地在两者之间使用。

要使用它，您需要使用 NPM 安装 node-sass-json-importer 并在命令行中将其指定为导入器:

./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
}

然后您将在 json 文件中执行以下操作:

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

在您的 JS 文件中，只需导入 json:

import colors from './colors.json'

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