web-dev-qa-db-fra.com

Variables scss globales pour Angular sans les importer à chaque fois

J'ai déjà des variables SCSS définies dans src/styles/settings/_variables.scss et je les importe dans src/styles.scss, mais ces variables ne sont toujours pas disponibles pour chaque composant.

Existe-t-il un moyen de créer un fichier global contenant toutes les variables SCSS pour le reste de mes composants? Parce que l'écriture @import dans chaque composant .scss fichier c'est très frustrant, surtout si j'ai beaucoup de composants imbriqués.

Je sais, il y a beaucoup de questions similaires, mais il semble qu'elles soient toutes dépassées et ne se rapportent pas aux versions récentes d'Angular.

J'utilise Angular 7.3 avec CLI.

cssangularsassglobal-variablesangular7
19
Vladimir Humeniuk

Vous avez juste besoin d'ajouter un peu plus de config, donc là où vous déclarez vos variables globales, vous devez les boucler dans :root{}. Donc, dans src/styles/settings/_variables.scss.

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

Ensuite, lorsque vous les utiliserez dans le SCSS, vous devrez y accéder de cette manière.

.example-class {
  background-color: var(--blue)
}

Pour ajouter à cela en ce qui concerne les commentaires, cette méthode peut utiliser mixins, @media et keyframes et ne se limite pas aux couleurs/polices. C'était un exemple.

D'après ma compréhension, vous avez besoin d'un fichier global src/assets/style/global puis d'importer chaque fichier scss là où vous les définissez comme tel.

@import 'filename';

Si vous ne voulez pas que des variables globales soient utilisées dans un composant, regardez quand les globaux fonctionnent. Regardez ViewEncapsulation , car cela peut être utilisé pour les ignorer.

C'est ainsi qu'un projet en cours dans lequel je travaille fonctionne avec des variables globales et il semble bien fonctionner. Cela supprimera la nécessité d'importer les variables dans chaque fichier scss que vous utilisez. Commentez si vous avez des problèmes, BR.

9
Dince12

Existe-t-il des moyens de rendre le fichier global avec variables scss disponible pour tous les composants?

Sans importer le fichier global à chaque fois dans chaque composant, vous voulez que ces variables sass soient disponibles, ce n'est pas possible.

La façon dont cela fonctionne dans SASS , si vous utilisez des partiels pour mieux organiser le code, vous pouvez appliquer @import directive de référencement. Donc, s'il y a des variables sass dans shared/_variables.scss:

$lightslategray: #778899;
$darkgray: #A9A9A9;

et ces variables doivent être utilisées dans une autre feuille de style, la feuille de style avec elles doit être @ importée d'abord:

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

Dans Angular cela fonctionne de la même manière (référence relative à la feuille de style externe). Donc, si vous avez besoin de sass variables, mixins or functions à utiliser par un particulier component.scss, il n'y a pas d'autre moyen propre, mais de les référencer dans ce component.scss en utilisant @import directive. Pour faciliter la tâche, vous pouvez créer un fichier src/_variables.scss et utilisez une syntaxe comme celle-ci dans votre component.scss:

@import “~variables.scss”;
4
Vadi

Dans angular 8 fonctionne pour moi.

Dans votre fichier _variable.scss vous devez ajouter:

:root{--my-var:#fabada}

Après cela, allez dans votre angular.json et ajoutez ceci dans "styles":

{"input":"yourPath/_variables.scss"}
0
lauren