Ember Cli和Twitter bootstrap

时间:2014-06-01 21:56:05

标签: twitter-bootstrap ember.js ember-cli

我跟着这里的示例http://reefpoints.dockyard.com/2014/05/07/building-an-ember-app-with-rails-part-1.html,我尝试使用此处Recommended way to include bootstrap library in Ember.JS ember-cli App的解决方案安装twitter bootstrap,但它对我不起作用。

当我查看页面来源时,我看到:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bostonember</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base href="/" />

    <link rel="stylesheet" href="assets/bostonember.css">
  </head>
  <body>
    <script>
      window.ENV = {"baseURL":"/","locationType":"auto","FEATURES":{},"APP":{"LOG_RESOLVER":true,"LOG_ACTIVE_GENERATION":true,"LOG_MODULE_RESOLVER":true,"LOG_VIEW_LOOKUPS":true},"LOG_MODULE_RESOLVER":true};
    </script>
    <script src="assets/bostonember.js"></script>
    <script>
      window.Bostonember = require('bostonember/app')['default'].create(ENV.APP);
    </script>

<script type="text/javascript">document.write('<script src="' + (location.protocol || 'http:') + '//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')</script>
</body>
</html>

这是我的Broc文件:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  name: require('./package.json').name,

  minifyCSS: {
    enabled: true,
    options: {}
  },

  getEnvJSON: require('./config/environment')
});

// Use this to add additional libraries to the generated output files.
app.import('vendor/ember-data/ember-data.js');
app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css')


// If the library that you are including contains AMD or ES6 modules that
// you would like to import into your application please specify an
// object with the list of modules as keys along with the exports of each
// module as its value.
app.import('vendor/ic-ajax/dist/named-amd/main.js', {
  'ic-ajax': [
    'default',
    'defineFixture',
    'lookupFixture',
    'raw',
    'request',
  ]
});

app.import({development:'vendor/route-recognizer/dist/route-recognizer.js'});
app.import({development:'vendor/FakeXMLHttpRequest/fake_xml_http_request.js'});
app.import({development:'vendor/pretender/pretender.js'});
module.exports = app.toTree();

除了我尝试安装twitter bootstrap之外没有其他任何不同可以帮助吗?

1 个答案:

答案 0 :(得分:3)

我认为你需要添加

<link rel="stylesheet" href="assets/vendor.css">

显式地指向index.html的head部分。

Broc文件声明中的import语句应该将bootstrap css添加到vendor.css,我必须链接该文件才能使其正常工作。