web-dev-qa-db-de.com

So verwenden Sie Angular 4 mit SASS

Ich beginne mein erstes Projekt mit Angular4 und sass und versuche, es herauszufinden, wie man sass richtig arbeitet. Ich verwende angular-cli und habe bereits den Standardstil für die Verwendung der scss-Syntax festgelegt. Ich habe auch schon die Zusammenstellung definiert usw.

Ich habe jedoch gesehen, dass wir eine Option styleUrls für die Komponente haben, wobei wir in einigen Fällen Stile definieren, die nur in dieser Komponente verwendet werden.

Das Problem ist, wenn ich eine scss-Datei in dieser component-Datei einstelle, wird keine eigene .css-Datei erstellt, die weder in der .css-Hauptdatei enthalten ist, die vom Stammprojekt generiert wird.

Im Grunde habe ich eine Projektstruktur wie folgt:

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, den css-Hauptstil in der styles.scss-Datei festzulegen, die später beim Build-Vorgang in die index.html-Datei eingefügt wird. Sie können aber auch für jede Komponente, die ich habe, eine einzige css-Datei erzeugen, z. home und client und verwenden diese css-Stile nur innerhalb ihrer eigenen component.

Kann man das machen? Ich habe es versucht und ich habe keine andere Quelle dazu gefunden!

cssangularsassangular-clicss-preprocessor
12
celsomtrindade

Was Sie suchen, ist die import Direktive :

@import "styles.scss";  
@import "css/styles.scss";  
@import url("http://example.com/css/styles.scss");

Dadurch wird das CSS aus den anderen CSS-Dateien in die Haupt-CSS-Datei importiert, wobei der Inhalt jeder Datei an die Hauptdatei angehängt wird, abhängig von der Reihenfolge, in der Sie sie einfügen.

Beachten Sie, dass Sie nicht die Dateierweiterung .scss benötigen, da SASS dies automatisch erledigt und Sie einfach mit @import "file" importieren können. Außerdem müssen Sie nicht jede Datei mit einem unabhängigen Import angeben, da Sie sie alle in einem einzigen Import kombinieren können:

@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");

Sie können auch verschachtelte Importe durchführen, indem Sie den @import innerhalb eines Selektors angeben:

.global-nav {  
  @import "nav-bkgd";
}

Hoffe das hilft! :)

5
Obsidian Age

In einem Angular 4.4+ mit ng-cli müssen Sie lediglich die folgenden Einstellungen in .angular-cli.json ändern.

{
  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

und ändern Sie gegebenenfalls in jeder Komponente .css in .scss.

@Component({
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
})
5
creep3007

Sie können "scss" angeben, wenn Sie ein Projekt erstellen.

ng new project-name --style scss
2
rch850

ich hatte das gleiche Problem, ich habe eine Leftnav-Komponente, und sein Scss schien nie kompiliert worden zu sein. Ich habe alles versucht, aber nicht funktioniert. Ich habe versucht, eine neue App mit Ng New zu erstellen ... aber danach wurde es behoben indem ich meine Gedanken ändere: D 

es scheint, als könnten wir same component selector nicht in seiner relativen .scss-Datei verwenden. Stattdessen sollten wir ein Umbruchdiv mit passendem className verwenden und diesen .className als Root-Wrapping von .scss-Dateiinhalten verwenden.

lass mich zeigen, 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 in app.html 

<leftnav></leftnav>

und wie ich es behoben habe! Wie ich sagte, indem ich ein Umbruch-Div mit Klassenname .leftnav in leftnav.html hinzufügte und es als Root-Umbruch meiner leftnav.scss anstelle des Komponentenselektors verwende 

also mein neues

.leftnav{
    background:red; 
}

und es funktioniert ! 

0
Moath.Omar

Wenn Sie bereits ein Wokring-Projekt haben, hilft ng new my-sassy-app --style=scss nicht, so dass Sie ng set defaults.styleExt scss verwenden müssen, dies ändert angular.cli.json-Datei als 

"defaults": {
  "styleExt": "scss",
  "component": {
 }
}

Ändern Sie jetzt die bereits vorhandenen css-Dateien in die Erweiterung scss. Sie sollten jetzt sehen, dass scss jetzt funktioniert. Vergessen Sie nicht, die css-Erweiterungen in den Komponentendefinitionen in scssDie Quelle

0
Black Mamba