Sam Selikoff Sam Selikoff - 1 month ago 7
Sass (Sass) Question

How can my addon import SCSS from bower and export CSS for host apps?

I'm using Ember CLI Sass within my addon (named

nmbl-foundation
), and I want this addon to customize & include Foundation and auto-import it for host apps.

I followed the Addon usage section of the docs but I'm having a hard time getting the importPaths to be correct.

I tried customizing the
appConfig
from
my-addon/config/environment.js
. If I make it

module.exports = function(environment, appConfig) {

return {
sassOptions: {
includePaths: ['node_modules/nmbl-foundation/bower_components/foundation-sites/scss']
}
};

};


then everything works for external host apps, but the addon's dummy app breaks. I can make it work for the dummy app by changing the above to

module.exports = function(environment, appConfig) {

return {
sassOptions: {
includePaths: ['bower_components/foundation-sites/scss']
}
};

};


but then this breaks for the host app - that is, unless the host app also
bower install --save foundation
.

Is it possible to get a setting to work for both cases, and potentially even situations where this addon is a second-order dependency? Ideally I want my addon to include its local Bower copy of Foundation so the host app doesn't need to worry about installing it (or any other deps this addon my bring in in the future).

Answer

To use with bower dependency:

Create a default blueprint for your addon. In its afterInstall hook, you can add bower packages to the application's bower.json. No need to worry about bower install --save foundation.

Here is a reference document for blueprint hooks. You can have a look at afterInstall and beforeInstall hooks.

Here is a sample code from ember-bootstrap.