在 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 中import 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
  }
}