gulp Bowerwiredep没有拿起bootstrap.css？答案

【问题标题】：gulp Bower wiredep not picking up bootstrap.css?gulp Bowerwiredep没有拿起bootstrap.css？
【发布时间】：2015-09-05 17:30:33
【问题描述】：

我有一个 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 或将其合并到构建过程中而不必要求开发人员这样做...请更新！

【问题讨论】：

同样的问题，你解决了吗？
没有。是 gulp 的错还是 bootstrap 的错？
不确定，我仍然面临这个问题

标签： css gulp bower wiredep

【解决方案1】：

我们可以覆盖项目的 bower.json 中的主要对象，而不是替换/修改 bootstrap 的 bower.json。

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

这对我有用！

【讨论】：

【解决方案2】：

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

bower_components/bootstrap/bower.json

那么您可以清楚地看到主要属性包含以下值：

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

所以你所要做的就是用 dist/css/bootstrap.css 替换 less/bootstrap.less ，如下所示：

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

瞧，就是这样。

【讨论】：

【解决方案3】：

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

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

现在可以了。

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

【讨论】：

拉取请求引导？
我不确定你在问什么。查看您的 \bower_components\bootstrap\ 文件夹，将有一个文件 bower.json，对其进行编辑并将“主要”部分更改为我上面所说的内容。

【解决方案4】：

这是最新版 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，您就会很成功！

【讨论】：

【解决方案5】：

你可以像这样在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'));
});

【讨论】：

这样效果更好。我尝试了标记为答案的那个，但是如果运行“bower install”，它会重置引导目录中的 bower.json 文件（正如预期的那样）。这样可以避免修改该文件并意外重置。
使用 bower 时要考虑的一个注意事项。是您不能修改 bower 文件夹中的任何文件。

【解决方案6】：

您最多可以使用 Bootstrap 3.3.4。之后，不会注入任何 css。只有JS。这在https://github.com/twbs/bootstrap/issues/16663 中已详尽提及。这可能需要一段时间才能解决。时至今日，仍未解决。问题是，wiredep 与我的工作流程配合得非常好。唯一有效的另一件事是 gulp-inject，但这就是 gulp，而且 gulp 对 Bootstrap 不那么友好。

【讨论】：