reactjsアプリのグローバルSASS変数

Question

現在、reactjsを学んでいて、私は自分のプロジェクトにSASSを追加しました。しかし、プロジェクト内の他のscssファイルで使用できるすべての変数とミックスインを格納する単一のファイルを作成したいと思います。どのように私が作るすべてのscssファイルにファイルを手動でインポートする必要なく、これは可能ですか？

マイフォルダ構造：

/srcに 資産/ 画像/

components/ 
    app/ 
     app.js 
     app.scss 

styles/ 
    scss/ 
     main.scss 
     _var.scss 
     _mixins.scss 
     _typography.scss 

index.css 
index.js 

Answer 1

あなたは他のすべての輸入は後に来て、マスターインポートファイルの一番上に変数をインポートする必要があります。したがって、上記のディレクトリ構造を想定し、main.scssにあなたは何をしたいと思います。また

@import 'var'; 
@import 'mixins'; 
@import 'typography'; 

... 

// Component imports 
@import '../../components/app/app'; 

、あなたのプロジェクトのベース（たとえば、index.scss）、にどこか近くに共有マスターインポートファイルを設定することができましたここで重要な要因は、あなたがあなたの変数インポート後に共有変数へのアクセスを必要とするものを輸入する必要があるということである

// in `styles/scss/main.scss` 
@import 'var'; 
@import 'mixins'; 
@import 'etc'; 

// in `index.scss` 
// Base style import 
@import 'styles/scss/main.scss'; 

// Component imports 
@import 'components/app/app'; 
@import 'components/etc/etc'; 

：のようになり。さもなければ変数は範囲にないでしょう。