Grunt Wiredep nie wstrzykuje plików bootstrap css w Yeoman Angular Tutorial

Question

Przechodzę przez samouczek dotyczący konfigurowania aplikacji AngularJS za pomocą Yeoman (http://yeoman.io/codelab.html), a pliki CSS Bootstrapa nie są uwzględniane w pliku index.html. Kiedy uruchomię pomruki, na stronie brakuje wszystkich stylów Bootstrap, w przeciwieństwie do tego, co widać na obrazie samouczka.

Pliki javascript Bootstrap są jednak zawarte w pliku index.html.

Czy to normalne zachowanie, czy też mam je uwzględnić ręcznie? Spodziewałbym się, że uruchomię aplikację Grunt Wiredep, aby dołączyć pliki bootstrap css pomiędzy obiektami zastępczymi <!-- bower:css --><!-- endbower --> w pliku index.html?

Answer 1

Dodaj kod obejścia dla bootstrap do pliku bower.json (nie nic bower_components edytować)

"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

Czy użyłeś wersji bootowania programu Sass po wybraniu opcji bootstrap. Po prostu skonfigurowałem następującą opcję:

Ta praca dla mnie.

Kiedy użyłeś tego przepływu, w pliku main.scss dołączonym do poniższej linii.

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

Jeśli jest to zdecydowanie konieczne, należy zastosować styl bootstrap.

Jeśli przejdziesz bez opcji bootstrap. Musisz użyć w wierszu poleceń, aby zainstalować bootstrap za pomocą następującego polecenia. Bower install bootstrap -S Konieczne "S". Po tym widać, że nie wstrzyknął pliku bootstrap.css dla pliku index.html. Następnie musisz zrobić małą zmianę w pliku bower.json w folderze instalacyjnym bootstrap. Przeglądaj następującą lokalizację, aby znaleźć bower.json

/bower_components/bootstrap/ 

Otwarte bower.js i znaleźć następujące fragmenty,

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

zapisz plik i uruchom ponownie grunt służą polecenia.

Answer 3

miałem ten sam problem i to co znalazłem w internecie aby go rozwiązać:

Prawdopodobnie zainstalowałeś wersję 3.3.5 bootstrap. Możesz to sprawdzić w pliku bower.json twojego projektu.

"bootstrap": "3.3.5" 

Jeśli tak, znalazłem te dwie opcje, aby dostać się z powrotem w stylu CSS:

1. Można zainstalować Sass dla bootstrap zamiast podstawowego css, przestrzeganiem zaleceń @ Nithin jeśli chcesz.

2. LUB, w wersji 3.3.5 programu startowego zadanie wiredep nie wstrzykuje pliku bootstrap.css w pliku index.html (powinno to zostać wkrótce poprawione), aby można było obniżyć wersję bootstrap do wersji 3.3.4 pisząc co następuje w wierszu poleceń:

   cd /../your-project-dir/

   altana zainstalować bootstrap # 3.3.4

następnie uruchomić folowing:

bower install 
grunt wiredep 

i spróbuj ponownie z

grunt serve 

Mam nadzieję, że to ci pomoże.

Źródła te pomogły mi rozwiązać mój problem. Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

Answer 4

Oficjalna odpowiedź od Bootstrap jest użycie nadpisania zablokować w bower.son:

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

Ze względu na niejasności w specyfikacji Bowera, wiredep wykonane kilka wątpliwych założeń dotyczących sposobu główne pole w bower.json działa. Niedawno Bower zaktualizował swoją specyfikację, aby rozwiązać ten problem i wyjaśnił, jak powinien działać główny i zaktualizowaliśmy naszą bower.json odpowiednio. Niestety, wiredep zepsuł się w wyniku, jeśli używałeś go z Bootstrap's vanompompiled CSS. Bower pracuje nad dalszym aktualizowaniem specyfikacji w celu rozwiązania tego problemu i lepszego wspomagania narzędzi takich jak wiredep.

Źródło: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 5

Dotyczy to także nowego Bootstrap 4. I jeszcze jedna ważna rzecz: trzeba dodać "współzależności" Bootstrap, aby mieć pewność, jQuery będzie wstrzykiwany przed 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" 
    } 
    } 
}