Grunt Wiredep 没有在 Yeoman Angular 教程中注入引导 css 文件答案

【问题标题】：Grunt Wiredep not injecting bootstrap css files in Yeoman Angular TutorialGrunt Wiredep 没有在 Yeoman Angular 教程中注入引导 css 文件
【发布时间】：2015-06-24 00:45:54
【问题描述】：

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

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

这是正常行为还是我打算手动包含它？我希望运行 Grunt Wiredep 以在 index.html 文件中的  占位符之间包含引导 css 文件？

【问题讨论】：

签入Gruntfile.js，很可能在wiredep配置中被忽略，能够直接导入app.scss，因为scss变量。
我检查了 Gruntfile.js，wiredep 配置中的唯一选项是 src: ["<%= yeoman.app %>/index.html"], ignorePath:/\.\.\//
@rodp82 你使用 bower 包管理器安装 Bootstrap 了吗？或者您手动包含引导程序？？
@nithin 我用过凉亭。在使用 yeoman 构建 Angular 应用程序时，部分设置包括一个关于是否在应用程序中包含引导程序的问题，我尝试了这两种方法，是的在安装过程中包含，否并在安装后单独安装。两种方法都有相同的结果。但是，如果我安装了 fontawesome 并运行 Grunt Wiredep，这些 css 文件将包含在 index.html 文件中

标签： angularjs twitter-bootstrap gruntjs yeoman bower

【解决方案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 的官方回答是使用 bower.son 中的 overrides 块：

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

由于 Bower 的规范含糊不清，wiredep 对 bower.json 中的 main 字段的工作方式做了一些有问题的假设。最近，Bower 更新了他们的规范来解决这个问题并阐明 main 应该如何工作，我们相应地更新了 bower.json。不幸的是，如果你将它与 Bootstrap 的 vanilla 预编译 CSS 一起使用，wiredep 就会崩溃。 Bower 正在努力进一步更新他们的规范以解决这个问题并更好地辅助工具，如wiredep。

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

【讨论】：

【解决方案3】：

您在选择引导选项时是否使用了 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

如果有肯定需要应用引导样式。

如果您没有引导选项。您需要在命令行中使用以下命令安装引导程序。凉亭安装引导程序 -S '-S' 需要。之后，您会看到它没有为 index.html 注入 bootstrap.css 文件。然后你必须在安装引导文件夹中的 bower.json 文件中做一些小改动。浏览以下位置找到 bower.json

/bower_components/bootstrap/

打开bower.js，找到如下sn-ps，

"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 serve 命令。

【讨论】：

感谢您的回答。我没有在安装中使用 Sass。更改 bootstrap 文件夹中的 bower.js 文件确实可以解决问题，但这是正常做法吗？我的印象是您不需要对 bower_components 文件夹中的任何内容进行更改，因为这些内容并未存储在版本控制中。
不，这不是这样做的好方法。因为当您更新组件时，它会覆盖您在文件中所做的更改。通常我们在不使用 sass 版本的包时这样做。你也有其他选择。您可以手动将 css 文件包含在下的 html 中，也可以尝试这种方式。否则你必须使用 sass 版本。

【解决方案4】：

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

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

"bootstrap": "3.3.5"

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

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

cd /../your-project-dir/

凉亭安装引导#3.3.4

然后运行以下命令：

bower install 
grunt wiredep

然后再试一次

grunt serve

希望这会对您有所帮助。

这些资源帮助我解决了我的问题。 Yeoman and Bower not adding Bootstrap CSS (AngularJS generator) https://github.com/yeoman/generator-angular/issues/1116

【讨论】：

【解决方案5】：

这也涉及新的 Bootstrap 4。还有一件重要的事情：您需要添加 Bootstrap 的“依赖项”以确保 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"
    }
  }
}

【讨论】：