Yeoman 和 Bower 没有添加 Bootstrap CSS（AngularJS 生成器）答案

【问题标题】：Yeoman and Bower not adding Bootstrap CSS (AngularJS generator)Yeoman 和 Bower 没有添加 Bootstrap CSS（AngularJS 生成器）
【发布时间】：2015-09-05 22:19:08
【问题描述】：

我在 Yeoman 网页上关注 codelab，到目前为止，我已经成功地关注了（我的开发环境运行时遇到了一些重大问题，但现在它没有返回任何错误）。

所以我创建了我的项目文件夹并运行了yo，选择了 AngularJS 并运行了这个东西。很快我就收到了? Overwrite package.json? 的提示，我回复了y 并收到了以下警告：

npm WARN package.json codelab@0.0.0 No license field.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency phantomjs@>=1.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing fsevents@0.3.6

在那之后，它完成了它正在做的事情，所以我再次运行 bower install 以确保（因为 package.json 的事情），然后运行 grunt serve。现在 grunt 说完成，没有错误，但我的页面只加载 main.css。我有一种强烈的感觉 bootstrap.css 文件丢失了。 This 就是它的样子，当 codelab 说明说它应该看起来像 this 时。

如果您需要有关生成内容的更多信息，请查看GitHub repository link。

欢迎任何关于我做错了什么的见解（如果有的话）。

【问题讨论】：

标签： angularjs twitter-bootstrap bower yeoman yeoman-generator-angular

【解决方案1】：

这并不理想，但我回滚到 Bootstrap 版本 3.3.4 并设置如下：

bower install --save bootstrap#3.3.4

bower_concat: {
  all: {
    dest: {
      'js': 'path/to/file/_bower.js',
      'css': 'path/to/file/_bower.css'
    }
  }
}

【讨论】：

【解决方案2】：

在bower.json文件中，Bootstrap的依赖版本设置为：

"bootstrap": "^3.2.0",

默认情况下，这意味着安装高于 3.2.0 的最新版本。结果，安装了最新的 3.3.5 版本并中断了。

所以，删除^ 符号并替换：

"bootstrap": "^3.2.0",

与：

"bootstrap": "3.3.4",

【讨论】：

【解决方案3】：

这对我也不起作用。我从这里得到了解决方案： https://github.com/twbs/bootstrap/issues/16663

我们通过覆盖我们的项目bower.json 临时解决了这个问题。对我们来说它工作正常，但我们正在等待 Bootstrap 的一些解决方案。

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

【讨论】：

【解决方案4】：

完成代码实验室后，我遇到了与您得到的结果完全相同的问题（警告和所有）。我必须通过回滚到 Bootstrap 3.3.4 来解决这个问题。

只需编辑 bower.json 并将 Bootstrap 行更改为：

    "bootstrap": "3.3.4",

然后运行以下命令，它应该可以工作：

    bower install
    grunt serve

【讨论】：

在编辑它之前，我的引导行在版本号之前有一个^（就像这个"angular": "^1.3.0"）。关于它的作用的任何想法，以及我是否应该在引导版本之前将其放回？除此之外，该站点现在看起来应该是这样，所以我终于准备好继续进行代码实验室了。谢谢
我相信这只是意味着要求高于 1.3.0。所以对于引导程序，它是“bootstrap”：“^3.2.0”，意思是安装任何高于 3.2.0 的东西。因此它会安装最新的 3.3.5，但它不起作用。将其设置为不带 ^ 的 3.3.4 表示只安装此版本，没有更高版本。
我遇到了同样的问题，就像我的魅力一样。

【解决方案5】：

如果你坚持使用 shell，你可以输入：

bower install --save bootstrap#3.3.4
grunt serve

这将确保 Twitter Bootstrap 被降级为对 Bower/yo-angular 更友好的版本，并将其保存为开发依赖项。然后，Grunt 将在其“服务”任务期间运行“wiredep”，并将 bootstrap.css 附加到项目的 index.html 中。

【讨论】：