Grunt Wiredep 没有在 Yeoman Angular 教程中注入 bootstrap css 文件

Question

我正在阅读有关使用 Yeoman (http://yeoman.io/codelab.html) 设置 AngularJS 应用程序的教程，Bootstrap 的 CSS 文件未包含在内在 index.html 文件中。因此，当我运行 g运行t 服务时，页面缺少所有 Bootstrap 样式，这与教程图片中显示的不同。

Bootstrap javascript 文件虽然包含在 index.html 文件中。

这是正常行为还是我打算手动包含它？我希望运行ning G运行t Wiredep 在 index.html 文件的  占位符之间包含 bootstrap css 文件？

Answer 1

当您选择 bootstrap 选项时，您是否使用了 bootstrap 的 sass 版本。我只是设置了以下选项

? 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样式需要应用。

如果您不选择 bootstrap 选项。您需要在命令行中使用以下命令安装 bootstrap。凉亭安装 bootstrap -S '-S' 是必要的。之后您会看到它没有为 index.html 注入 bootstrap.css 文件。然后你必须对安装 bootstrap 文件夹中的 bower.json 文件做一些小的改动。浏览以下位置以找到 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"
],

保存文件并运行g运行t 再次提供命令。

Answer 2

将 bootstrap 的覆盖代码添加到您的 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/

Answer 3

我遇到了同样的问题，这是我在互联网上找到的解决方法：

您可能已经安装了 bootstrap 的 3.3.5 版本。您可以在项目的 bower.json 文件中验证它。

"bootstrap": "3.3.5"

如果是这样，我找到了这两个选项来恢复 css 样式：

您可以为 bootstrap 安装 Sass 而不是基本的 css，如果需要，请按照@nithin 的说明进行操作。
或者，在 bootstrap 的 3.3.5 版本中，wiredep 任务不会在您的 index.html 中注入 bootstrap.css（应该很快修复），因此您可以通过在命令提示符中写入以下内容将 bootstrap 版本降级到 3.3.4：

cd /../你的项目目录/

凉亭安装bootstrap#3.3.4

然后运行以下：

bower install 
grunt wiredep

然后用

再试一次

grunt serve

希望这对您有所帮助。

这些资源帮助我解决了我的问题。 https://github.com/yeoman/generator-angular/issues/1116

Answer 4

Bootstrap 的官方答案是使用 bower.son 中的覆盖块：

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

Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the main field in bower.json works. Recently, Bower updated their spec to address this and clarify how main should work, and we updated our bower.json accordingly. Unfortunately, wiredep broke as a result if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is working to further update their spec to address this problem and better assist tools like wiredep.

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

Answer 5

这也涉及新的 Bootstrap 4。还有一件重要的事情：您需要添加 Bootstrap 的 "dependencies" 以确保 jquery 将被注入在 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"
    }
  }
}

Grunt Wiredep 没有在 Yeoman Angular 教程中注入 bootstrap css 文件

Grunt Wiredep not injecting bootstrap css files in Yeoman Angular Tutorial

twitter-bootstrap

angularjs

gruntjs

yeoman

bower