Recommended way to use Bootstrap's LESS source in Ember.JS ember-cli app

Question

From this answer, it looks like linking to Bootstrap's dist files is easy.

However, I'm using LESS in my project and want to take advantage of Bootstrap's LESS files. What's the recommended way to link this all up?

Also, since using LESS is technically using Bootstrap's source files, should I also link to Bootstrap's JS source too? Or is it fine to assume mixing sources bootstrap/less and compiled dists bootstrap/dist/js/bootstrap.js will just work?

Answer 1

As of Ember CLI version 0.1.1, this is the recommended way to use Bootstrap's less in your project.

First, install bootstrap:

$ bower install --save-dev bootstrap

Then install the less preprocessor

$ npm install --save-dev ember-cli-less

Then replace app.css with app.less in this folder:

/app/styles/

Inside your new app.less file, add this to the top of the file:

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

In your Brocfile.js, add this:

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');

If you also want to use glyphicons that are bundled with boostrap, add this to Brocfile.js (ember-cli-build.js if you're using the latest ember-cli):

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

Answer 2

Here are the steps I did:

1. Ensure ember-cli compiles your .less files by installing broccoli-less-single

   $ npm install --save-dev ember-cli-less
   

2. Install bootstrap3 with bower

   $ bower install bootstrap --save
   

3. Remove app/styles/app.css and create your own app/styles/app.less

   @import "vendor/bootstrap/less/bootstrap.less";
   

BONUS: You can import bootstrap.js through the Brocfile.js file. Just add

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

NOTE: In your app/index.html, make sure you add

<script src="assets/vendor.js"></script>

Answer 3

For Ember 2.8 solution from ember-cli-less addon readme worked for me:

Install Bootstrap source:

bower install --S bootstrap

Specify the include paths in ember-cli-build.js:

var app = new EmberApp({
  lessOptions: {
    paths: [
      'bower_components/bootstrap/less'
    ]
   }
});

Import into app.less:

@import 'bootstrap';

Taken from: https://github.com/gdub22/ember-cli-less#examples

Answer 4

You may have found solution for this already, but with ember-cli 0.0.33+, bower install -S bootstrap, which saves your files to the vendor folder and writes to your bower.json file.

Follow that up with app.import('vendor/bootstrap/dist/js/bootstrap.min.js'); in your Brocfile.js. I included an app.less file in app/styles/. You can reference yourvendor/bootstrap/less/` from there.

I also include a custom.less import at the bottom of my app.less where I can write my own stuff.

Hope that helps.

Answer 5

To use the Less version of Bootstrap with ember-cli:

1. install Bootstrap Bower package

   $ bower install --save bootstrap
   

2. import bootstrap.less into app/styles/app.less

   @import "vendor/bootstrap/less/bootstrap.less";