Gibt es eine Möglichkeit, SASS/SCSS-Variablen zugänglich zu machen, ohne sie mit Angular-CLI in jede Komponente zu importieren?

Question

Ich arbeite an einem Projekt mit vielen Komponenten. Ich denke gerade über die Verwendung von SASS-Variablen nach, aber es könnte ärgerlich sein, die Variable in jede vorhandene Komponente zu importieren. Vielleicht weiß jemand, dass es eine Möglichkeit gibt, SASS-Variablen in allen * .scss-Dateien im Projekt zugänglich zu machen, ohne sie zu importieren.

Answer 1

eine globale SCSS verwenden zu können, SCSS in Winkel cli.json hinzufügen

"apps": [ 
    { 
    // ... 
    "styles": [ 
    "./src/style.scss" 
    ] 
    } 
] 

und in index.html

<link rel="stylesheet" type="text/css" href="style.css"> 

Answer 2

Ab sofort auf Ihre Frage zu beantworten ist "NO ". Wir müssen variables & mixins Dateien in jeder Ihrer Komponente SASS-Datei importieren.

eckig-cli bietet die Konfiguration zum Hinzufügen paths/includePaths Funktionalität für sass. Dazu müssen wir folgende Konfiguration unter app Eigenschaft hinzufügen.

"stylePreprocessorOptions": { 
    "includePaths": [ 
    "style-paths" 
    ] 
} 

oben Konfiguration Mit zumindest können wir direkt include Datei nach Dateinamen, wie relativen Pfad Überspringen folgt

@import 'variables'; 

als Referenz siehe #3700 & Dokumentation auf global-styles.