在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

故宫包node-sass-json-vars让你在@import指定JSON文件。由于您还可以在JavaScript中使用import json文件，因此可以在两者之间轻松使用。

要使用它，你会安装node-sass-json-importer与NPM并将其指定为在命令行上进口商：

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