Grunt Wiredep未在Yeoman Angular教程中注入Bootstrap CSS文件

Question

我在跟随使用 Yeoman 设置 AngularJS 应用程序的教程（http://yeoman.io/codelab.html）时，发现 Bootstrap 的 CSS 文件没有被包含在 index.html 文件中。因此，当我运行 grunt serve 时，页面缺少所有 Bootstrap 样式，与教程中显示的图像不同。

但是，index.html 文件中已经包含了 Bootstrap 的 JavaScript 文件。

这是正常的行为还是我需要手动包含它？ 我原本期望运行 Grunt Wiredep 将 bootstrap css 文件包含在 index.html 文件中的 <!-- bower:css --><!-- endbower --> 占位符之间?

- rodp82

---

请检查Gruntfile.js文件，很可能在wiredep配置中被忽略了，以便能够直接在app.scss中导入，因为涉及到scss变量。 - YOU

我检查了Gruntfile.js文件，wiredep配置中唯一的选项是src: ["<%= yeoman.app %>/index.html"], ignorePath:/\.\.\//。 - rodp82

@rodp82，你使用了Bower软件包管理器安装Bootstrap吗？还是手动包含了Bootstrap？ - nithin

@nithin 我使用了Bower。在使用Yeoman构建Angular应用程序时，设置的一部分包括一个问题，询问是否在应用程序中包含Bootstrap，并且我尝试了两种方法：在设置期间选择“是”以包含它，或者在设置之后单独安装它。这两种方法都有相同的结果。但是，如果我安装FontAwesome并运行Grunt Wiredep，则这些CSS文件将包含在index.html文件中。 - rodp82

Answer 1

将覆盖Bootstrap的代码添加到您的bower.json文件中（不要编辑中的任何内容）。

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

Bootstrap 3.3.5发布了

- lotusdragon

Answer 2

官方的解决方案是在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原始预编译CSS和wiredep，那么wiredep会因此而崩溃。Bower正在努力进一步更新他们的规范，以解决这个问题并更好地帮助像wiredep这样的工具。

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

- Ryan Solida

Answer 3

你在选择Bootstrap选项时是否使用了Sass版本的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样式。

如果您选择不使用Bootstrap选项，则需要在命令行中使用以下命令安装Bootstrap。 bower install bootstrap -S '-S'是必需的。之后，如果没有将bootstrap.css文件注入index.html，则需要在安装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"
],

保存文件并再次运行grunt serve命令。

- nithin

---

谢谢你的回答。我在安装中没有使用Sass。更改bootstrap文件夹中的bower.js文件确实可以解决问题，但这是正常做法吗？我原本以为你不需要对bower_components文件夹中的任何内容进行更改，因为它们不会被存储在版本控制中。 - rodp82

不，那不是正确的做法。因为当你更新组件时，它会覆盖你在文件中所做的更改。通常我们这样做是因为我们没有使用包的sass版本。你还有其他选项。你可以在html中手动包含css文件，在<!-- build:css(.tmp) styles/main.css -->下尝试这种方式。否则你必须使用sass版本。 - nithin

Answer 4

这也涉及到新的Bootstrap 4。有一件重要的事情：您需要添加Bootstrap的“依赖项”，以确保在加载bootstrap.js之前注入jquery。

"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"
    }
  }
}

- Paweł

Answer 5

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

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

"bootstrap": "3.3.5"

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

1. 您可以安装Sass以替换基本的css，如果需要，请按照@nithin的说明进行操作。

2. 或者，在bootstrap版本3.3.5中，wiredep任务不会将bootstrap.css注入到您的index.html中（很快就会修复），因此您可以通过在命令提示符中输入以下内容将bootstrap版本降级到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

- hhelbawi