Grunt Wiredep injiziert Bootstrap CSS-Dateien in Yeoman Winkel Tutorial

Question

Ich gehe durch das Tutorial zum Einrichten einer AngularJS App mit Yeoman (http://yeoman.io/codelab.html), und Bootstrap CSS-Dateien werden nicht in der index.html-Datei enthalten. Wenn ich grunt serve starte, fehlen auf der Seite alle Bootstrap-Stile, anders als im Tutorial-Bild.

Die Bootstrap-Javascript-Dateien sind jedoch in der index.html-Datei enthalten.

Ist das normales Verhalten oder soll ich es manuell einbeziehen? Ich hätte erwartet, dass Grunt Wiredep die Bootstrap-CSS-Dateien zwischen den <!-- bower:css --><!-- endbower --> Platzhaltern in der index.html-Datei enthält?

Answer 1

Fügen Sie den Aufhebungscode für Bootstrap Ihre bower.json Datei (bearbeite nichts in bower_components)

"dependencies": { 
... 
}, 
"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "less/bootstrap.less" 
     ] 
    } 
} 

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 2

Haben Sie die Bootstrap-Version verwendet, als Sie die Bootstrap-Option gewählt haben? Ich habe gerade mit folgender Option

? Would you like to use Sass (with Compass)? Yes 
? Would you like to include Bootstrap? Yes 
? Would you like to use the Sass version of Bootstrap? Yes 

Diese Arbeit für mich in Ordnung.

Wenn Sie diesen Fluss verwendet, in Ihrer main.scss-Datei folgende Zeile enthalten.

// bower:scss 
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"; 
// endbower 

Wenn es da definitiv Bootstrap-Stil muss gelten.

Wenn Sie ohne Bootstrap-Option gehen. Sie müssen in der Befehlszeile den Bootstrap mit dem folgenden Befehl installieren. bower install bootstrap -S Das '-S' notwendig. Danach sehen Sie, dass es die Datei bootstrap.css für index.html nicht injiziert hat. Dann müssen Sie kleine Änderungen in bower.json Datei im Bootstrap-Ordner installieren. Durchsuchen Sie hier erzeugt die bower.json

/bower_components/bootstrap/ 

öffnen bower.js zu finden und die folgenden Schnipsel finden,

"main": [ 
"less/bootstrap.less", 
"dist/js/bootstrap.js" 
], 

and change as follow, 

"main": [ 
"less/bootstrap.less", 
"dist/js/bootstrap.js", 
"dist/js/bootstrap.css", 
"dist/js/bootstrap-theme.css" 
], 

speichern Sie die Datei und starten Sie erneut Befehl Grunzen dienen.

Answer 3

ich hatte das gleiche Problem und das ist, was ich im Internet gefunden um es zu lösen:

Sie haben wahrscheinlich die Bootstrap Version 3.3.5 installiert. Sie können es in der bower.json-Datei Ihres Projekts überprüfen.

"bootstrap": "3.3.5" 

Wenn ja, fand ich diese beiden Optionen, um den CSS-Stil zurück zu bekommen:

1. Sie Sass für Bootstrap installieren kann anstelle der grundlegenden CSS, folgen Sie den Anweisungen @ Nithin ist, wenn Sie wollen.

2. ODER, in der Version 3.3.5 des Bootstrap injiziert die draftdep Task die bootstrap.css nicht in Ihre index.html (sollte bald behoben werden), so dass Sie Ihre Bootstrap-Version auf 3.3 downgraden können.4 durch den folgenden in einer Eingabeaufforderung zu schreiben:

   cd /../your-project-dir/

   Bower installieren Bootstrap # 3.3.4

führen Sie dann die Folowing:

bower install 
grunt wiredep 

und versuchen Sie es erneut mit einem

grunt serve 

Hoffe, das wird dir helfen.

Diese Quellen haben mir geholfen, mein Problem zu lösen. Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

Answer 4

Die offizielle Antwort von Bootstrap ist die Überschreibungen in bower.son Block zu verwenden:

"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "less/bootstrap.less" 
    ] 
    } 
} 

Aufgrund Unbestimmtheit in Bowers Spezifikation, wiredep machte einige fragwürdige Annahmen darüber, wie die Hauptfeld in bower.json funktioniert. Kürzlich hat Bower ihre Spezifikation aktualisiert, um dies zu beheben und zu klären, wie main funktionieren sollte, und wir haben unsere bower.json entsprechend aktualisiert. Leider ist das Problem mit der Verwendung von bootstrap's vorkompiliertem CSS behoben worden. Bower arbeitet daran, ihre Spezifikationen weiter zu aktualisieren, um dieses Problem zu beheben und Tools wie drahtloses Arbeiten besser zu unterstützen.

Quelle: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 5

Dies betrifft auch die neuen Bootstrap 4. Und es gibt eine wichtige Sache: Sie müssen Bootstrap die „Abhängigkeiten“ hinzufügen wird sicher sein jquery vor bootstrap.js injiziert werden

"dependencies": { 
(...) 
}, 
"overrides": { 
    "bootstrap": { 
    "main": [ 
     "dist/js/bootstrap.js", 
     "dist/css/bootstrap.css", 
     "scss/bootstrap.scss",// <-- for new Bootstrap 
     "less/bootstrap.less" // <-- for old Bootstrap 
    ], 
    "dependencies": { 
     "jquery": ">= 3.2.1" 
    } 
    } 
}