Angular-Cli - Wie strukturiert man scss?

Question

Ich war sehr frustriert, dass ich die Stile in Angular-Cli wie gewünscht einsetzen konnte. Ich verstehe einfach nicht, wie man es strukturieren soll.

Das ist mein Ordner styles,

- styles 
-- components 
--- buttons.scss 
-- partials 
--- mixins.scss 
--- variables.scss 
-- main.scss 
-- styles.scss (default file) 

in meiner main.scss Datei habe ich alle Dateien importiert ich aus der App müssen durch.

@import './components/buttons.scss'; 
@import './partials/variables.scss'; 
@import './partials/mixins.scss'; 

und in meinem app.component.ts,

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.html', 
    styleUrls: [ '../styles/main.scss' ], 
}) 

Alles funktioniert, wenn ich die App laden. Groß! Dann füge ich eine neue Komponente header.component.ts hinzu und füge header.scss meinem Styles-Ordner hinzu.

-styles 
-- header 
--- header.scss 

Im header.component.ts ich das Stylesheet gesetzt,

@Component({ 
     selector: 'app-header', 
     templateUrl: './header.html', 
     styleUrls: [ '../styles/header/header.scss' ], 
    }) 

Und ich verwende diesen Header innerhalb app.html.

<div> 
<app-header></app-header> 
</div> 

Jetzt ist mein Browser alle möglichen Fehler zu werfen Variablen fehlt, weil header.scss auf Variablen in /partials/variables.scss bezeichnet hat.

Aber hat nicht main.scss, wo Variablen.scss importiert wird, bereits durch die Zeit geladen header.component.ts lädt? Ich verstehe nicht, wie es funktioniert!

Alles, was ich tun will, ist laden variables.scss, mixins.scss, buttons.scss zuerst und in der Lage sein, die Variablen und Mixins in denen zu verwenden, wo immer ich will. Wie mache ich das?

EDIT: Muss ich variables.scss, mixins.scss, buttons.scss in jede Komponente importieren, die ich mache?

Answer 1

Muss ich variables.scss, mixins.scss, buttons.scss in jede Komponente importieren, die ich mache?

Ja, müssen Sie sie importieren, wenn Sie zum Beispiel Variablen in header.scss verwenden mag, aber der Import von definierten Arten in Klassen bewusst sein, denn wenn man Klassen können zum Beispiel zwei Mal importieren, dann ist es zwei hinzugefügt mal zu Ihrem Ausgabestile ..

prüfen diese Frage: https://github.com/sass/sass/issues/1094 Für die Klassen erstrecken Sie sillent Klassen https://csswizardry.com/2014/01/extending-silent-classes-in-sass/