Grunt Wiredep non inietta i file cst bootstrap in Yeoman Angular Tutorial

Question

Sto seguendo il tutorial sull'impostazione di un'app AngularJS utilizzando Yeoman (http://yeoman.io/codelab.html) ei file CSS di Bootstrap non vengono inclusi nel file index.html. Quindi, quando eseguo grunt service, alla pagina mancano tutti gli stili Bootstrap, a differenza di quanto mostrato nell'immagine del tutorial.

I file javascript Bootstrap sono tuttavia inclusi nel file index.html.

È questo comportamento normale o ho intenzione di includerlo manualmente? Mi sarei aspettato che eseguissi Grunt Wiredep per includere i file cst bootstrap tra i segnaposti <!-- bower:css --><!-- endbower --> nel file index.html?

Answer 1

Aggiungere il codice di override per bootstrap al file bower.json (non modificare nulla 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

Hai usato la versione di bootstrap di sass quando hai scelto l'opzione di avvio. Ho appena impostato con la seguente opzione

Questo lavoro per me bene.

Quando si utilizza questo flusso, nel file main.scss incluso la riga seguente.

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

Se c'è sicuramente bisogno di applicare lo stile di bootstrap.

Se si va senza opzione bootstrap. È necessario utilizzare nella riga di comando per installare bootstrap utilizzando il seguente comando. bower install bootstrap -S Il "-S" necessario. Dopodiché vedrai che non è stato iniettato il file bootstrap.css per index.html. Quindi devi fare piccole modifiche nel file bower.json nella cartella installstrap di installazione. Sfoglia seguente percorso per trovare la bower.json

/bower_components/bootstrap/ 

bower.js aperte e trovare i seguenti frammenti,

"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" 
], 

Salvare il file ed eseguire grugnito servire di nuovo il comando.

Answer 3

ho avuto lo stesso problema ed è quello che ho trovato su internet per risolverlo:

Probabilmente avete installato la versione 3.3.5 di bootstrap. Puoi verificarlo nel file bower.json del tuo progetto.

"bootstrap": "3.3.5" 

Se è così, ho trovato queste due opzioni per ottenere la parte posteriore stile css:

1. È possibile installare Sass per bootstrap al posto del css di base, seguire le istruzioni di @ Nithin se si desidera.

2. OPPURE, nella versione 3.3.5 di bootstrap l'attività wiredep non inserisce il bootstrap.css nel proprio index.html (dovrebbe essere risolto a breve), quindi è possibile eseguire il downgrade della versione di bootstrap a 3.3.4 scrivendo quanto segue in un prompt dei comandi:

   cd /../your-project-dir/

   scrigno di installare bootstrap # 3.3.4

quindi eseguire il folowing:

bower install 
grunt wiredep 

e riprovare con un

grunt serve 

Spero che questo ti possa aiutare.

Queste origini mi hanno aiutato a risolvere il mio problema. Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

Answer 4

La risposta ufficiale da Bootstrap è quello di utilizzare le sostituzioni bloccano in bower.son:

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

Grazie alla vaghezza nelle specifiche di Bower, wiredep fatto alcune ipotesi discutibili su come il campo principale in bower.json funziona. Recentemente, Bower ha aggiornato le proprie specifiche per risolvere il problema e chiarire come dovrebbe funzionare il sistema, e di conseguenza abbiamo aggiornato il nostro bower.json. Sfortunatamente, cablato si è rotto di conseguenza se lo stavi usando con il CSS precompilato di Bootstrap. Bower sta lavorando per aggiornare ulteriormente le proprie specifiche per risolvere questo problema e per meglio supportare strumenti come wiredep.

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

Answer 5

Anche questo riguarda la nuova Bootstrap 4. E c'è una cosa importante: è necessario aggiungere "dipendenze" di Bootstrap per essere sicuri jQuery sarà iniettato prima bootstrap.js

"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" 
    } 
    } 
}