Adding WrapBootstrap Theme to Ember (2.0)

Question

I've installed ember-cli-less and I have included

@import "../../bower_components/bootstrap/less/bootstrap"

In the my styles/app.less file

I have the following in ember-cli-build.js file:

app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
  });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
  });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
  });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
  });
  app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
    destDir: 'fonts'
  });

  app.import('bower_components/bootstrap/dist/js/bootstrap.js');

  return app.toTree();

Now I want to take a theme from Wrapbootstrap and include it in my project.

There is another link to a similiar question: Recommended way to include bootstrap library in Ember.JS ember-cli App however - it seems to concentrate mostly on just getting bootstrap setup - it doesn't go much into adding a theme.

score 0 · Answer 1 · answered Oct 29 '15 at 18:30

To my knowledge (and I could be wrong here), since you're including bootstrap in app/style.css that will end up in your "app.css" file (instead of the vendor.css file).

In that situation I think you also have to import your theme from your app/styles.less.

@import "../../bower_components/bootstrap/less/bootstrap"
@import "path/to/wrap-boostrap/theme/main.css|.less file"

I assume you can leave the extension out for a css file in less, it's just to point out that you want the path to the css/less file of the theme.

One thing to remember is that vendor.css is placed before app.css (in the html page) which means that any other plugins the are counting on bootstrap.css being available will not work if you do app.import('path/to/jquery/plugin.css) you will have to include them in you app.less file as well.

Adding WrapBootstrap Theme to Ember (2.0)

1 Answers1