1

I'm following along with the example here http://reefpoints.dockyard.com/2014/05/07/building-an-ember-app-with-rails-part-1.html and I tried to install twitter bootstrap using the solution here Recommended way to include bootstrap library in Ember.JS ember-cli App, but it's not working for me.

When I view page source I see:

<!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>

This is my Broc file:

/* 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();

There isn't anything else different besides me trying to install twitter bootstrap can anyone help?

Community
  • 1
  • 1
ltsimpso
  • 93
  • 2
  • 8

1 Answers1

3

I think you need to add

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

to the head section of your index.html explicitly.

The import statements in the Broc file declarations should add the bootstrap css to vendor.css and I have to link that file to make it work.

theBernd
  • 191
  • 1
  • 7