web-dev-qa-db-de.com

So verwenden Sie Bootstrap 4 mit SASS in Angular

Ich möchte Bootstrap 4 mit SASS in einem Angular (4+) -Projekt verwenden, das mit Angular CLI erstellt wurde.

Insbesondere muss ich:

  • verwenden Sie SASS anstelle von CSS sowohl als globalen Stil als auch als Komponentenstil
  • bootstrap SASS-Quelle zusammen mit meinen benutzerdefinierten * .scss-Stile kompilieren
  • stellen Sie sicher, dass meine benutzerdefinierten Stile die Bootstrap-Quelle überschreiben, sodass ich die Bootstrap-Quellen bei Bedarf überschreiben kann, ohne die Bootstrap-Quelle selbst zu bearbeiten.
  • add watch & auto-rekompile hinzufügen, wenn sich eine meiner * .scss-Dateien (sowohl für Komponenten als auch für den globalen Stil) zum ng serve-Skript ändert
49
Francesco Borzi

Um Angular + Bootstrap 4 mit SASS einzurichten, müssen Sie lediglich die Angular-CLI konfigurieren und das Bootstrap 4-npm-Paket installieren. Es ist nicht erforderlich, einen SASS-Compiler zu installieren, da dieser bereits enthalten ist.

EDIT: Diese Antwort wurde aktualisiert, um mit der neueren Version Angular CLI (getestet mit Version 6.1.3) zu funktionieren. Die Anweisungen für die ältere Angular CLI haben ich unten in der Antwort belassen, jedoch Ich empfehle Ihnen dringend, Ihre Angular CLI-Version zu aktualisieren.


ANLEITUNG MIT NEUE ANGULAR CLI (Version 6 oder höher)

1) Konfigurieren Sie die Angular-CLI für die Verwendung von SASS anstelle von CSS

- bei bestehenden Projekten:

Bearbeiten Sie Ihre angular.json-Datei und fügen Sie dem "styleext": "scss"-Objekt den [email protected]/angular:component-Schlüsselwert hinzu.

So sollte es aussehen:

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

- Beim Erstellen eines neuen Projekts

Verwenden Sie einfach:

ng new my-project --style=scss

2) Ändern Sie die vorhandenen Komponentenstile von CSS in SASS (falls vorhanden).

Dazu müssen Sie lediglich die Style-Datei von .css in .scss umbenennen und die @Component({ ... })-Konfiguration entsprechend ändern:

styleUrls: ['./my-component.scss']

Auf diese Weise wird das angle-cli diese Dateien automatisch überwachen und neu kompilieren, wenn sie sich ändern, während Sie Befehle wie ng serve ausführen.

3) Fügen Sie Bootstrap 4 hinzu

Installiere Bootstrap 4 über npm:

npm install bootstrap --save

Fügen Sie der angular-cli.json config innerhalb des styles-Arrays jetzt Bootstrap hinzu (vor allen anderen benutzerdefinierten css/scss-Dateien, damit diese die Bootstrap-Regeln überschreiben können:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

Auf diese Weise bleibt der Quellcode von Bootstrap 4 sauber und es kann sehr einfach aktualisiert werden, sobald eine neue Version veröffentlicht wird.

4) Fügen Sie Ihre benutzerdefinierten (globalen) SASS-Dateien hinzu

Alle zusätzlichen SASS-Stile, die das Projekt global beeinflussen sollen (im Gegensatz zu den einzelnen Komponentenstilen), können unter app/assets/scss hinzugefügt und dann im styles-Array von angular-cli.json referenziert werden.

Mein Vorschlag ist, auf eine einzelne main.scss-Datei zu verweisen, die alle Ihre benutzerdefinierten SASS-Stile enthält: zum Beispiel ein _variables.scss für Ihre benutzerdefinierten Variablen, eine _global.scss-Datei für Ihre globalen Regeln usw.

In Ihrem angular-cli.json referenzieren Sie also nur eine benutzerdefinierte main.scss-Datei:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

was intern den gesamten benutzerdefinierten globalen * SASS-Code enthält:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* Beachten Sie, dass Sie MÜSSEN NICHT die *.scss-Style-Dateien der einzelnen Komponenten enthalten.

5) Fügen Sie den Ersatz für Bootstrap JavaScript und jQuery hinzu.

Es gibt einige Projekte, in denen Sie Bootstrap ohne jQuery verwenden können.

Zwei Beispiele:

Der Unterschied zwischen diesen beiden Projekten wird hier diskutiert: Was ist der Unterschied zwischen "ng-bootstrap" und "ngx-bootstrap"?


ANWEISUNGEN ZUM VERWENDEN DES ALTEN WINKELS CLI

WARNUNG: Ich werde diesen Teil der Antwort nicht mehr beibehalten. Um weiterlesen zu können, empfehle ich, Ihre Angular CLI-Version zu aktualisieren und den obigen Anweisungen zu folgen.

1) Konfigurieren Sie die Angular-CLI für die Verwendung von SASS anstelle von CSS

Lauf:

ng set defaults.styleExt scss

dies wirkt sich auf Ihre .angular-cli.json-Konfigurationsdatei ( example ) aus.

Hinweis: Wenn Sie noch einmal bei Null anfangen, können Sie mit Angular CLI ein neues Projekt erstellen. Verwenden Sie dazu: ng new my-project --style=scss Dies entspricht dem normalen Erstellen eines neuen Projekts und dem Ausführen des oben genannten Befehls.

2) Ändern Sie die vorhandenen Komponentenstile von CSS in SASS (falls vorhanden).

Dazu müssen Sie lediglich die Style-Datei von .css in .scss umbenennen und die @Component({ ... })-Konfiguration entsprechend ändern:

styleUrls: ['./my-component.scss']

( Beispiel ).

Auf diese Weise wird das angle-cli diese Dateien automatisch überwachen und neu kompilieren, wenn sie sich ändern, während Sie Befehle wie ng serve ausführen.

3) Fügen Sie Bootstrap 4 hinzu

Installiere Bootstrap 4 über npm:

npm install bootstrap --save

Fügen Sie der .angular-cli.json config innerhalb des styles-Arrays jetzt Bootstrap hinzu (vor allen anderen benutzerdefinierten css/scss-Dateien, damit diese die Bootstrap-Regeln überschreiben können:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

( Beispiel ).

Auf diese Weise bleibt der Quellcode von Bootstrap 4 sauber und es kann sehr einfach aktualisiert werden, sobald eine neue Version veröffentlicht wird.

4) Fügen Sie Ihre benutzerdefinierten (globalen) SASS-Dateien hinzu

Alle zusätzlichen SASS-Stile, die das Projekt global beeinflussen sollen (im Gegensatz zu den einzelnen Komponentenstilen), können unter app/assets/scss hinzugefügt und dann im styles-Array von .angular-cli.json referenziert werden.

Mein Vorschlag ist, auf eine einzelne main.scss-Datei zu verweisen, die alle Ihre benutzerdefinierten SASS-Stile enthält: beispielsweise einen _variables.scss für Ihre benutzerdefinierten Variablen, eine _global.scss-Datei für Ihre globalen Regeln usw. ( Beispiel ).

In Ihrem .angular-cli.json referenzieren Sie also nur eine benutzerdefinierte main.scss-Datei:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

was intern den gesamten benutzerdefinierten globalen * SASS-Code enthält:

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* Beachten Sie, dass Sie MÜSSEN NICHT die *.scss-Style-Dateien der einzelnen Komponenten enthalten.

5) Fügen Sie den Ersatz für Bootstrap JavaScript und jQuery hinzu.

Es gibt einige Projekte, in denen Sie Bootstrap ohne jQuery verwenden können.

Zwei Beispiele:

Der Unterschied zwischen diesen beiden Projekten wird hier diskutiert: Was ist der Unterschied zwischen "ng-bootstrap" und "ngx-bootstrap"?

94
Francesco Borzi

Zusätzlich zu @ ShinDarths answer sollten Sie sich für eine minimalere Lösung entscheiden und nur die Bootstrap-Module importieren, die Sie benötigen.

Sie würden also ersetzen:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

Mit:

"styles": [
  "assets/scss/main.scss"
],

Dann würde Ihr main.scss aussehen:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";
18
Leo

Ab Version 6 soll Sein

"styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "src/assets/scss/main.scss"
]

Wenn du ein eigenes Theme für mich hast, funktioniert das

hinzufügen der lib nur in der styles.scss

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";
5
Whisher

Falls jemand anderes auf das Problem der Javascript-Abhängigkeiten stößt, das ich beim Ausführen von Bootstrap 4 mit "angle-cli" hatte, müssen Sie auch den "angle-cli" -Compiler wissen lassen, dass Sie die anderen Abhängigkeiten installiert haben, die boostrap 4 benötigt: 

jquery, popper.js und bootstrap.js

Dazu müssen Sie das Scripts-Array in der Konfigurationsdatei .angular-cli.json folgendermaßen ändern: 

"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"]

Ich vermute, dass Sie Jquery und Popper mit npm install --save jquery popper.js installiert haben, sodass diese Pakete im Ordner node_modules verfügbar sind. 

0
vhbazan

Hier ist eine alternative Methode, mit der ich erfolgreich bauen konnte

1 - Installieren Sie Bootstrap 

npm install bootstrap 

Dies sollte die boostrap-scss-Datei unter node_modules . Hinzufügen. (Die Schritte 2 - 6 stammen von https://code.visualstudio.com/docs/languages/css ).

2 - Node-sass installieren

nmp install -g node-sass

Dies ist notwendig, um sass to css zu transpilieren

3 - Erstellen Sie einen Ordner, in dem Sie scss und generierte CSS-Dateien aufbewahren können. z.B.

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4 - Erstellen Sie eine custom.scss-Datei mit folgendem Inhalt:

@import "../node_modules/bootstrap/scss/bootstrap";

5 - Erstellen Sie eine Aufgabe in VSCode über Strg + Umschalt + B> Aufgaben konfigurieren> Tasks.json-Datei aus Vorlage erstellen> Andere

die Datei task.json unter .vscode wird mit dem Standardinhalt .. erstellt. Ersetzen Sie den Inhalt durch

// Sass configuration
{
  // See https://go.Microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "Shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

Hinweis: Ändern Sie die Dateinamen und -pfade entsprechend Ihren Anforderungen.

6 - Führen Sie die Task aus, um css zu generieren: Strg + Umschalt + B> 'Sass compile' oder 

7 - Befolgen Sie die Schritte in der Bootstrap-Vorgehensweise: ( https://getbootstrap.com/docs/4.1/getting-started/theming/ )

0
Atilla Baspinar