Yeoman和Bower未添加Bootstrap CSS（AngularJS生成器）

Question

我在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文件。这是它的样子，而codelab指令说应该看起来像这个。

如果您需要有关生成内容的更多信息，请参阅GitHub存储库链接。

欢迎提供任何关于我是否做错了什么的见解。

- Miha Šušteršič

Answer 1

完成codelab后，我遇到了和你一样的问题并得到了相同的结果（包括警告）。我只能通过回退到Bootstrap 3.3.4来解决这个问题。

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

    "bootstrap": "3.3.4",

然后运行以下代码，应该就可以正常工作：

    bower install
    grunt serve

- metalwood

---

在编辑之前，我的引导行在版本号之前有一个 ^（像这样 "angular": "^1.3.0"）。你知道它是做什么的吗？如果我应该在引导版本之前把它放回去？除此之外，网站看起来现在应该没问题了，所以我终于准备好继续进行编码实验了。谢谢。 - Miha Šušteršič

我认为这意味着要求的版本高于1.3.0。所以对于bootstrap而言，"bootstrap": "^3.2.0" 的意思是安装任何高于3.2.0的版本。因此它会去安装最新的3.3.5版本，但这并不起作用。将它设置为没有 ^ 的 3.3.4 版本，则只安装这个版本，不会安装更高的版本。 - metalwood

我曾经遇到过同样的问题，但对我来说解决起来非常顺利。 - Urr4

Answer 2

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

我们通过覆盖项目中的bower.json文件来暂时解决了这个问题。对我们来说有效，但我们正在等待Bootstrap的一些解决方案。

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

- codesnooker

Answer 3

如果你坚持使用 shell，你只需要输入：

bower install --save bootstrap#3.3.4
grunt serve

这将确保Twitter Bootstrap被降级到更适用于Bower/yo-angular的版本，并将其保存为dev依赖项。 Grunt将在其“serve”任务期间运行'wiredep'，并将bootstrap.css附加到您项目的index.html中。

- Glenn Batuyong

Answer 4

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

"bootstrap": "^3.2.0",

默认情况下，这意味着安装高于3.2.0的最新版本。因此，安装了最新版本3.3.5，这将导致错误。 因此，请删除^符号并替换为：

"bootstrap": "^3.2.0",

使用：

"bootstrap": "3.3.4",

- burak

Answer 5

这并不是最理想的解决方案，但我回滚到了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'
    }
  }
}

- CR Rollyson