Search code examples
ember.jsbourbonbroccolijs

Importing Bourbon with broccoli-sass

I have installed Bourbon with Bower, but cannot get broccoli-sass to import Bourbon. Broccoli-sass is compiling my app.scss file to app.css.

I have tried

@import '_bourbon';

and

@import 'bourbon';

at the top of my app.scss file but get the error:

Error: file to import not found or unreadable: _bourbon

My brocfile:

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

var app = new EmberApp();

var sassImportPaths = [
  'app/styles',
  'bower_components/bourbon/app/assets/stylesheets',
];

var appCss = compileSass(sassImportPaths, 'app.scss', '/assets/app.css');


module.exports = app.toTree([appCss]);
Solution

  • No need to import it in your Brocfile. You can simply add Bourbon as a dependency in your app.scss:

    @import "bower_components/bourbon/app/assets/stylesheets/bourbon.scss";

    If you look at this file you will see that it contains all the necessary imports.