Wie verwenden von Winkel 4 mit SASS

Beginne ich mein erstes Projekt mit Angular4 und sass und ich werde versuchen es herauszufinden, wie die Arbeit mit sass den richtigen Weg. Ich bin mit angular-cli und bereits die Standard-Formatvorlage zu verwenden scss syntax. Ich habe auch bereits definiert, die Zusammenstellung, etc.

Jedoch sah ich, dass wir eine option styleUrls auf die Komponente, wo wir in einigen Fällen definieren Sie Formatvorlagen, die nur in dieser Komponente.

Das problem ist, wenn ich einen scss - Datei in das component es ist nicht die Erzeugung eigenen .css Datei weder in den Haupt - .css - Datei, generiert aus der root-Projekt.

Also im Grunde habe ich ein Projekt-Struktur wie diese:

app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

Und ich möchte in der Lage sein, die wichtigsten css Stil innerhalb der styles.scss Datei, die eingefügt wird, in der index.html Datei muss später auf dem build-Prozess. Aber auch in der Lage sein zum generieren eines einzigen css - Datei für jede Komponente, die ich habe, z.B. home und client, und benutzen Sie nur noch die css Stilen innerhalb Ihrer eigenen component.

Ist es möglich, es zu tun? Ich habe versucht, es zu tun und ich fand keine andere Ressource dazu!

von dem, was ich verstehen, die gekapselt css-gebündelt innerhalb der main.bundle.js dann, wenn die app lädt es dann hängen die Stile des head-Tags (in einem separaten style-tag von der Haupt-Stile). Sind Ihre styles nicht geladen?
Ja, Sie sind, aber nur die wichtigsten Stil-Datei style.css. Aber zum Beispiel, die Dateien zu Hause.scss und client.scss nie kompilieren .css und deswegen nie injizieren.
ungerade ist, können Sie neu installieren Sie Ihre Knoten-Module. Vielleicht eine der Lader ist Durcheinander
Hier wissen Sie, wie Sie in der Regel die Dinge funktionieren, und Sie tun das gleiche. Aber für einige Grund Sie funktionieren. Sie Hinzugefügt styles.scss zu .angular-cli noch in der letzten build seine nicht immer spiegelt sich in Ihrer Seite ?

InformationsquelleAutor celsomtrindade | 2017-06-22

5

Was Sie suchen, ist die "import-Direktive:
```
@import "styles.scss";  
@import "css/styles.scss";  
@import url("http://example.com/css/styles.scss");
```
Diese importiert die CSS aus den anderen CSS-Dateien in der Haupt-CSS-Datei, hängt den Inhalt jeder Datei auf die Haupt-Datei, basierend auf der Reihenfolge, die Sie wählen, eingefügt.

Beachten Sie, dass Sie nicht müssen die .scss Datei-Erweiterung, da SASS handhaben, die automatisch, und Sie können einfach importieren Sie mit @import "file". Und Sie brauchen auch nicht angeben, jede Datei mit einem unabhängigen importieren, wie können Sie kombinieren Sie alle in eine einzelne importieren:
```
@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");
```
Können Sie auch tun, verschachtelten Importe durch die Angabe der @import in einem Selektor:
```
.global-nav {  
  @import "nav-bkgd";
}
```
Hoffe, das hilft! 🙂

Ich weiß nicht, ob ich mich klar genug ausgedrückt, aber das Hauptproblem ist nicht impoting die Dateien, aber kompilieren Sie. Zum Beispiel in der Frage, die Dateien _home.scss und _client.scss wird nie kompiliert rein .css. Oder bin ich etwas fehlt in deiner Antwort?
Ich entschuldige mich. Es gibt jedoch keinen Grund, warum Sie sollten nicht kompilieren. Verweisen Sie einfach auf Sie als /app/home/_home.scss und /app/client/_client.scss beziehungsweise. Sie können feststellen, dass Sie brauchen, Ihren cache zu löschen; halten Sie SHIFT beim klicken auf das Symbol "aktualisieren".
Sie sind immer kompiliert, aber es injiziert Kopf mit style-Attribut nur dann, wenn die Komponente verwendet wird.

InformationsquelleAutor Obsidian Age
5

In einer Eckigen 4.4+ mit ng-cli, müssen Sie nur ändern Sie die folgenden Einstellungen in .angular-cli.json
```
{
  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}
```
und in jeder Komponente, wenn nötig, zu ändern .css zu .scss
```
@Component({
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
})
```
aber scss kompiliert werden muss, wo soll man das definieren ? es ist nicht nur eine Erweiterung ...
href="https://stackoverflow.com/a/41541042/2408013">stackoverflow.com/a/41541042/2408013

InformationsquelleAutor creep3007
2

Können Sie angeben, scss, wenn Sie erstellen Projekt.
```
ng new project-name --style scss
```
Wie ich schon sagte, in der Frage, das hab ich bereits gemacht. Es ist nicht das problem.
Sorry für verpasste. Ist Ihre styleUrls von Zuhause Komponente sieht aus wie styleUrls: ['./_home.scss']?

InformationsquelleAutor rch850
0

ich hatte das gleiche Problem, ich habe eine leftnav Komponente und das scss zu sein schien nie kompiliert , ich habe versucht alle oben aber nicht funktioniert , und ich versuchte, Sie zu creat neue app mit ng neu .... aber danach habe ich es behoben, indem Sie meinen Gedanken 😀

scheint, wie wir nicht verwenden same component selector innerhalb seiner verwandten .scss-Datei
aber stattdessen sollten wir nutzen, eine Umhüllung div mit der passenden className , und verwenden Sie diese .className als eine Wurzel wickeln .scss Datei-Inhalts.

lassen Sie mich demonstrieren, das ist meine app:
```
app/component/leftnav
  |leftnav.scss
  |leftnav.html ==> simply `left nav works!`
  |leftnav.ts ==> selector leftnav
app/
  |app.html
  |app.scss
```
und in der alten leftnav.scss
```
leftnav{
    background:red;
}
```
und innen app.html
```
<leftnav></leftnav>
```
und wie ich es behoben ! wie ich schon sagte, indem ein wrapping div mit dem Klassennamen .leftnav innen leftnav.html und nutzen Sie als root die Verpackung von meinem leftnav.scss statt-Komponenten-Selektor

also mein neuer
```
.leftnav{
    background:red; 
}
```
- und es funktioniert !

InformationsquelleAutor Moath.Omar
0

Wenn Sie bereits einen wokring Projekt ng new my-sassy-app --style=scss nicht helfen, so müssen Sie ng set defaults.styleExt scss diese änderungen angular.cli.json Datei als
```
"defaults": {
  "styleExt": "scss",
  "component": {
 }
}
```
Sich jetzt ändern, die bereits vorhanden css Dateien zu scss Erweiterung, die Sie sollten sehen, dass scss funktioniert nun.Vergessen Sie nicht, ändern Sie die css Erweiterungen in der Komponente definations zu scss
Die Quelle

InformationsquelleAutor Black Mamba

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.