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