gulp Bower wiredep 没有接bootstrap.css？

Question

我有一个 index.html 文件。在我的 bower.json 文件中，我有一个依赖项：

"bootstrap": "~3.3.2"

在 gulp 文件中我有：

  gulp.src('./main.html')
    .pipe(wiredep({
      bowerJson: require('./bower.json')
    }))
    .pipe(gulp.dest('./'));

当我这样做时，我看到正在生成所有 css 和 js，但没有看到 bootstrap.css 包含在注入中的任何地方，其他依赖项是。这是怎么回事？

我想一定有一个简单的解决办法？还是 gulp 与 grunt 相比有问题？

更新：我被一个铁杆 maven 狂热者**** 扔给我，关于 bower 和 node 与 maven 相比如何糟糕，以及在安装 bower 之后你如何必须手动修改一个 bower.json 文件下载后打包。如果有某种方法可以合法地不必修改 bower.json 或将其合并到构建过程中而不必要求开发人员执行此操作...请更新！

Answer 1

在我将根目录中最初指向 *.less 文件的 bower.json 文件更改为以下内容后：

"main": ["dist/css/bootstrap.css"],

现在可以使用了。

注意：我删除了 bootstrap.js 的条目，因为我不需要它。

Answer 2

这是 Bootstrap 最新版本 3.3.5 的问题。有关详细信息，请参阅以下 GitHub 问题：

https://github.com/twbs/bootstrap/issues/16663

换句话说，在 3.3.4 版本之前它应该可以正常工作。

确保列出您要在 Bower 中使用的实际版本；例如，在安装了 3.3.5 之后，在 bower.json 中使用 ~3.3.2 仍然会使 Bower 求助于 3.3.5，只需将其更改为 3.3.2 而不是 ~3.3.2 即可变成金色！

Answer 3

是的，正如@Helzgate 所说，bootstrap 正在考虑将 bootstrap.less 作为默认样式文件，而不是 bootstrap.css ，您可以前往

查看

bower_components/bootstrap/bower.json

然后你可以清楚地看到主要属性持有以下值：

main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ]

所以你所要做的就是将 less/bootstrap.less 替换为 dist/css/bootstrap.css 像这样：

"main": [
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]

就是这样。

Answer 4

而不是replacing/modifyingbootstrap的bower.json我们可以覆盖项目bower.json中的主要对象。

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

这对我有用！

Answer 5

您最多可以使用 Bootstrap 3.3.4。之后，没有 css 被注入。只有 JS。 https://github.com/twbs/bootstrap/issues/16663 中详尽地提到了这一切。这可能需要一段时间才能解决。时至今日，仍未解决。问题是 wiredep 与我的工作流程配合得非常好。唯一同样有效的是 gulp-inject，但那就是 gulp，并且 gulp 不是那么 Bootstrap 友好。

Answer 6

您可以像这样在 wiredep 选项中设置覆盖：

gulp.task('bower',['inject-js'],function(){
return gulp.src('./www/index.html')
    .pipe(wiredep({
        "overrides" : {
            "bootstrap":{
                "main":[Set the path to any thing you like]
            }
        },
        directory:'./www/lib/'
    }))
    .pipe(gulp.dest('./www'));
});

gulp Bower wiredep 没有接bootstrap.css？

gulp Bower wiredep not picking up bootstrap.css?

css

bower

gulp

wiredep