Grunt Wiredep не вставляет загрузочные файлы css в Yeoman Angular Учебное пособие

Я расскажу об установке приложения AngularJS с помощью Yeoman (http://yeoman.io/codelab.html), а файлы Bootstrap CSS не попадают в индекс. html файл. Поэтому, когда я запускаю службу grunt, на странице отсутствуют все стили Bootstrap, в отличие от того, что показано в изображении учебника.

Файлы javascript Bootstrap включены в файл index.html, хотя.

Является ли это нормальным поведением или я должен включить его вручную? Я бы ожидал запустить Grunt Wiredep, чтобы включить загрузочные файлы css между хранилищами <!-- bower:css --><!-- endbower --> в файле index.html?

Ответы

Ответ 1

Добавьте код переопределения для начальной загрузки в файл bower.json(ничего не редактируйте в 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/

Ответ 2

Официальным ответом от Bootstrap является использование блока overrides в bower.son:

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

Из-за неопределенности в спецификации Bowers, wiredep сделал несколько сомнительных предположений о том, как работает основное поле в bower.json. Недавно Бауэр обновил свою спецификацию, чтобы решить эту проблему, и уточнить, как следует работать, и мы обновили наш bower.json соответственно. К сожалению, wiredep сломался в результате, если вы использовали его с использованием предварительно скомпилированного CSS файла Bootstraps. Bower работает над дальнейшим обновлением своих спецификаций для решения этой проблемы и улучшения вспомогательных инструментов, таких как wiredep.

Источник: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Ответ 3

Использовали ли вы сасс-версию bootstrap, когда вы выбрали опцию bootstrap. Я просто настраиваю следующую опцию

? 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

Эта работа для меня.

Когда вы использовали этот поток, в файле main.scss включается следующая строка.

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

Если это определенно стиль начальной загрузки, нужно применить.

Если вы не используете опцию bootstrap. Вы должны использовать в командной строке для установки начальной загрузки, используя следующую команду.   bower install bootstrap -S "-S" необходимо. После этого вы увидите, что он не ввел файл bootstrap.css для index.html. Затем вам нужно внести небольшие изменения в файл bower.json в папку install bootstrap. Найдите следующее местоположение, чтобы найти bower.json

/bower_components/bootstrap/

Откройте bower.js и найдите следующие фрагменты,

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

сохраните файл и снова запустите команду grunt.

Ответ 4

У меня была такая же проблема и что я нашел в Интернете, чтобы решить ее:

Возможно, вы установили версию бутстрапа версии 3.3.5. Вы можете проверить его в файле bower.json вашего проекта.

"bootstrap": "3.3.5"

Если это так, я нашел эти два варианта, чтобы вернуть стиль css:

  • Вы можете установить Sass для начальной загрузки вместо базового css, следуйте инструкциям @nithin, если хотите.

  • ИЛИ, в версии 3.3.5 бутстрапа задача wiredep не вставляет bootstrap.css в ваш index.html(он должен быть исправлен в ближайшее время), поэтому вы можете понизить версию начальной загрузки до 3.3.4 написав в командной строке следующее:

    cd/../your-project-dir/

    bower install bootstrap # 3.3.4

затем выполните следующее:

bower install 
grunt wiredep

и повторите попытку с помощью

grunt serve

Надеюсь, это поможет вам.

Эти источники помогли мне решить мою проблему. Yeoman и Bower не добавляют Bootstrap CSS (генератор AngularJS) https://github.com/yeoman/generator-angular/issues/1116