Kann Verzeichnis 'Bootstrap' nicht auflösen

Question

Ich habe an angular starter heruntergeladen und ich versuche, Bootstrap darauf zu installieren. Sie erklären, wie man das in der External Stylesheet section macht.

Ich habe installiert Bootstrap:

npm i bootstrap --save 
npm i bootstrap-sass --save 

und dann in der Spitze styles.scss hinzugefügt:

@import 'bootstrap/scss/bootstrap.scss'; 

Aber es ist mit rot markiert erwähnt:

Cannot resolve directory 'bootstrap'

Beliebig Hilfe wird zutiefst geschätzt!

Answer 1

Wie bereits erwähnt, müssen Sie die Tilde hinzufügen, wenn Sie in Ihr CSS importieren.

@import 'bootstrap/scss/bootstrap.scss'; 

Zweitens ist die Bootstrap-CSS-Datei wird Schriftarten zusammen mit dem Stylesheet laden, was zu dem Fehler, den Sie mit sind, weil es Verwandten Pfade mit webpack weiß nicht, wo Pickup.

Um das zu beheben, können Sie entweder den Pfad des Ordners ändern, um den richtigen wie folgt als from here gesehen:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap"; 
@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

Und die Schriftarten Loader Ihre webpack Konfiguration hinzufügen:

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    loader: 'url-loader', 
} 

Aber der einfachste Weg für Sie, um das Problem zu umgehen wäre, den Stil zu entfernen Import, den Sie tun, entfernen Sie die bootstrap-sass Abhängigkeit an Verwenden Sie stattdessen die CDN.

Der Vorteil dabei ist, dass Clients, die Bootstrap mit diesem cdn bereits heruntergeladen haben, die zwischengespeicherte Version erhalten. Da viele Websites diese Tage verwenden, ist es sehr wahrscheinlich, dass sie es nicht erneut herunterladen müssen, und es erspart Ihnen auch die Probleme, es zu hosten oder in Ihr Paket aufzunehmen.

Answer 2

Um sass-loader Import ein sass Modul aus mode_modules Ordnern, stellen Sie vor dem Modulpfad mit einem ~ zu lassen. Ansonsten wird der Pfad vorgesehen wie ein relatives aufgelöst:

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

Für weitere Informationen sass-loader docs überprüfen.

Answer 3

Nichts existiert bei src/styles/bootstrap/scss/bootstrap.scss, so können Sie entweder manuell Kopieren/Einfügen (oder Download) eine bootstrap.scss dort Datei oder Bootstrap-Import in Ihr src/styles/styles.scss von Ihrem node_modules über:

@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

Sie erhalten font- Fehlern, bis Sie in einer Zeile vor diesem so fügen Sie Ihre styles.scss lautet:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; 
@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

Mehr: https://stackoverflow.com/a/35575175/3814251