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

あなたは@importでJSONファイルを指定することができますnode-sass-json-vars NPMパッケージ。また、import jsonファイルをjavascriptで使用できるので、2つのファイルの間で簡単に使用できます。

それを使用するには、NPMとnode-sass-json-importerをインストールして、コマンドラインで輸入として指定したい：あなたのSASSファイルで

./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/node-sass-json-importer.js MySASSFile.scss 

、あなたの代わりにすることを残して、変数を指定しません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 
    } 
}