web-dev-qa-db-fra.com

Yeoman et Bower n'ajoutant pas Bootstrap CSS (générateur AngularJS)

Je suis un codelab sur la page Web de Yeoman, et j’ai réussi jusqu’à présent (avec quelques ratés majeurs qui font que mon environnement de développement se met en route, mais maintenant, il ne renvoie aucune erreur).

J'ai donc créé mon dossier de projet et lancé yo, sélectionné AngularJS et lancé la chose. Assez tôt dans le processus, j'ai reçu une invite ? Overwrite package.json? à laquelle j'ai répondu avec y et les avertissements suivants:

npm WARN package.json [email protected] No license field.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency phantomjs@>=1.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing [email protected]

Après cela, il a fini ce qu'il était en train de faire, alors j'ai relancé bower install juste pour être sûr (à cause du package.json), puis grunt serve. Grunt dit maintenant done, sans erreur, mais ma page ne charge que main.css. J'ai un fort sentiment que le fichier bootstrap.css est manquant. Ceci est ce à quoi il ressemble, quand les instructions de code-barres disent qu'il devrait ressembler à this .

Si vous avez besoin d'informations supplémentaires sur ce qui a été généré, voici un lien vers le référentiel GitHub .

Toute idée sur ce que je fais mal (si quelque chose) est la bienvenue.

angularjstwitter-bootstrapboweryeomanyeoman-generator-angular
26
Miha Šušteršič

Après avoir fait le codelab j'ai eu exactement le même problème avec le même résultat que vous obtenez (avertissements et tous). Je devais contourner le problème en revenant à Bootstrap 3.3.4.

Editez simplement bower.json et modifiez la ligne Bootstrap en:

    "bootstrap": "3.3.4",

Ensuite, lancez ce qui suit et cela devrait fonctionner:

    bower install
    grunt serve
56
chipzilla

Cela n'a pas fonctionné pour moi non plus. J'ai une solution d'ici: https://github.com/twbs/bootstrap/issues/16663

Nous avons résolu ce problème temporairement en remplaçant notre projet bower.json. Pour nous cela fonctionne bien, mais nous attendons une solution de Bootstrap.

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

Si vous vous en tenez à un shell, vous pouvez simplement taper:

bower install --save bootstrap#3.3.4
grunt serve

Cela garantira que Twitter Bootstrap sera rétrogradé à une version plus conviviale pour Bower/yo-angular et le sauvegardera en tant que dépendance de dev. Grunt exécutera alors 'wiredep' pendant sa tâche 'serve' et ajoutera le fichier bootstrap.css au fichier index.html de votre projet.

10
Glenn Batuyong

Dans le fichier bower.json, la version de dépendance de Bootstrap est définie comme suit:

"bootstrap": "^3.2.0",

Par défaut, cela signifie que vous devez installer la dernière version supérieure à 3.2.0 . Par conséquent, la dernière version 3.3.5 est installée et cela ne fonctionne pas.

Supprimez donc le signe ^ et remplacez:

"bootstrap": "^3.2.0",

avec:

"bootstrap": "3.3.4",
1
burakhan alkan

Ce n’est pas idéal, mais j’ai rétabli la version 3.3.4 de Bootstrap et l’ai installé comme ceci:

bower install --save bootstrap#3.3.4

bower_concat: {
  all: {
    dest: {
      'js': 'path/to/file/_bower.js',
      'css': 'path/to/file/_bower.css'
    }
  }
}
0
CR Rollyson