Adding Bulma to Ember.js application

Bulma is excellent CSS framework for building user interfaces. It’s more customizable than Bootstrap thanks to many sass variables at your disposal.

To add Bulma to an existing Ember application:

  1. Install ember-cli-sass: ember install ember-cli-sass
  2. Install node-sass: npm install -D node-sass
  3. Modify ember-cli-build.js:

     const EmberApp = require('ember-cli/lib/broccoli/ember-app');
     const nodeSass = require('node-sass');
    
     module.exports = function(defaults) {
       let app = new EmberApp(defaults, {
         sassOptions: {
           implementation: nodeSass,
           includePaths: [
             'node_modules/bulma',
           ],
         }
       });
    
       return app.toTree();
     };
    
  4. Add app/styles/app.scss with following content:

     @import 'bulma';
    
  5. Remove app/styles/app.css

If you need to customize bulma theme, define specific variables above @import 'bulma';.