Variables globales SASS dans l'application reactjs

Question

Je suis actuellement en train d'apprendre reajjs et je viens d'ajouter SASS à mon projet. Cependant, je veux créer un seul fichier qui stocke toutes mes variables et mixins globalement qui peuvent ensuite être utilisés par n'importe quel autre fichier scss dans mon projet. Comment est-ce possible sans avoir à importer manuellement le fichier dans chaque fichier scss que je fais?

Ma structure du dossier:

/src actifs/ images/

components/ 
    app/ 
     app.js 
     app.scss 

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

index.css 
index.js 

Answer 1

Vous devez importer vos variables en haut d'un fichier d'importation maître, toutes les autres importations venant après . Donc, en supposant que la structure de votre annuaire ci-dessus, en main.scss vous voulez faire:

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

... 

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

Sinon, vous pouvez créer un fichier d'importation maître partagé quelque part près de la base de votre projet (par exemple, index.scss), qui doit ressembler à:

// 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'; 

Le facteur important ici est que vous devez être tout importateur qui a besoin d'accéder à vos variables partagées après votre variable à l'importation. Sinon, les variables ne seront pas dans la portée.