Adding Bootstrap sass files to ember-cli project

ember-cli-bootstrap-sass.md

Bootstap SASS in Ember-cli

When you have an existing ember-cli project and want to add bootstrapp-sass

Install ember-cli-sass

ember install ember-cli-sass

Install Bootstrap wiith SASS

bower install bootstrap-sass --save

Configure ember-cli-build.js

Add sassOptions to the options while creating the app.

Import Bootstrap.js after app creation.

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

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      sassOptions: {
        includePaths: [
          'bower_components/bootstrap-sass/assets/stylesheets'
        ]
      }
  });

  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap.js');

  return app.toTree();
};

Rename stylesheet

Ember-cli initiates the main stylesheet as a .css file, we need to rename it to .scss You can find the generated stylesheet here: app/styles/app.css

Import Bootstrap in main stylesheet

Now add this to app.scss

@import "bootstrap";
@import "bootstrap/theme";

All done!

Now you can make use of Bootstrap in yoour app