Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 673
Joe Avatar asked May 19 '14 21:05

Joe


3 Answers

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'
});
like image 96
Johnny Oshika Avatar answered Nov 08 '22 07:11

Johnny Oshika


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>
like image 26
Melvin Avatar answered Nov 08 '22 08:11

Melvin


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

like image 35
Jan Míšek Avatar answered Nov 08 '22 08:11

Jan Míšek