Using custom theme with ember-bootstrap add-on - ember.js

Question

I'm using ember-bootstrap add-on which is working fine but I would like to use the Cerulean theme from https://bootswatch.com/cerulean/. If I just overwrite the .CSS files in bower_components/bootstrap/dist/css then I expect they will be overwritten the next time I do a bower install or upgrade ember. How do I get around that please?

Answer 1

First of all you need to manually install bootstrap:
$ bower install bootstrap --save
Then edit ember-cli-build.js so it looks like that:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// If you do not use ember-bootstrap - then you can omit these lines
'ember-bootstrap': {
'importBootstrapCSS': false
}
});
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
destDir: 'fonts'
});
return app.toTree();
};
Now you have fully working bootstrap. To add Celurian theme copy its bootstrap.css to vendor/ directory.
Then remove original bootstrap.css from ember-cli-build.js and add theme css:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// If you do not use ember-bootstrap - then you can omit these lines
'ember-bootstrap': {
'importBootstrapCSS': false
}
});
//app.import(app.bowerDirectory + /bootstrap/dist/css/bootstrap.css');
// The name does not matter, default bootstrap.css will work as well
app.import('vendor/celurian.css');
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/fonts/glyphicons- halflings-regular.woff', {
destDir: 'fonts'
});
return app.toTree();
};
So, in essence, you need to add required files to vendor directory and import them in ember-cli-build.js.
The other way would be to use SASS and just import required files from app.scss.