Loading SASS Variables in ES6

Question

How does one use a SASS variable in an ES6 file?

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

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

<CardHeader style={styles.cardHeader} />

The stylesheet:

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