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:
- Install ember-cli-sass:
ember install ember-cli-sass
- Install node-sass:
npm install -D node-sass
-
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(); };
-
Add
app/styles/app.scss
with following content:@import 'bulma';
- Remove
app/styles/app.css
If you need to customize bulma
theme, define specific variables above @import 'bulma';
.