早午餐不通过 bower.js 引入 Bootstrap答案

【问题标题】：Brunch Not Pulling in Bootstrap via bower.js早午餐不通过 bower.js 引入 Bootstrap
【发布时间】：2014-05-08 12:38:22
【问题描述】：

全新的早午餐（和凉亭）。我通过 bower 安装了 Bootstrap，并且我有以下早午餐配置文件：

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
      joinTo: 'app.js': /^(app|vendor|bower_components)/
      order:
        before: [
          'bower_components/jquery/jquery.js'
          'bower_components/handlebars/handlebars.js'
          'bower_components/ember/ember.js'
          'bower_components/ember-data-shim/ember-data.js'
          'bower_components/bootstrap/dist/js/bootstrap.js'
        ]
    stylesheets:
      joinTo: 'app.css': /^(app|vendor|bower_components)/
    templates:
      precompile: true
      root: 'templates'
      joinTo: 'app.js': /^app/

我的app.css 中没有任何引导 css。但是，它在 app.js 中显示 js。不太确定可能出了什么问题。

【问题讨论】：

嘿@Gregg 你最终弄清楚了吗？我得到了完全相同的problem
我也遇到了同样的问题，但是没有包含 JS。有人知道吗？
@abbood 有点晚了，但请看我的回答。

标签： css twitter-bootstrap bower brunch

【解决方案1】：

不要忘记通过 bower.json 示例告诉早午餐它的 bower 依赖项：

{
  "name": "your-app",
  "version": "0.0.1",
  "main": "www/app.js",
  "dependencies": {
    "bootstrap": ">=3.2.0"
  },
  "overrides": {}
}

【讨论】：

这是否意味着所有 bower 依赖项都必须复制到 package.sjon？
是的，然后从与 bower.json 所在的文件夹相同的文件夹中运行 bower install
抱歉，这不能回答@PumWalters 的问题 - package.json 适用于使用 npm 作为节点模块安装的项目。这与 bower.json 不同，后者是使用 bower 安装的项目的清单。

【解决方案2】：

我在遵循早午餐指南时遇到了同样的问题。我没有安装Brunch CSS plugin 的问题。使用 npm 安装 css-brunch：

npm install css-brunch --save-dev

【讨论】：

【解决方案3】：

问题是 bower_components 依赖文件夹中的 bower.json 配置。

例如Bootstrap 作为 bower 依赖项不会导出 .css 样式表，而是使用 Less。不幸的是，brunch 不会在没有 less-brunch 的情况下编译 .less 文件。

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

所以，有两种解决方案：

1.

只需安装 less-brunch

npm install less-brunch --save

2.

覆盖主 bower.json 中的依赖项配置，告诉 bower 导出 .css 样式表。

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

现在你应该在 app.css 中导入所有依赖项

记得安装 css-brunch

npm install css-brunch --save

【讨论】：