0

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?

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.