ember.jssassember-addon

using sass in ember.js addon


I am developing an addon in ember.js for my new ember app.

I am trying to figure out how to use sass as styles with my addon and make it independent from my app.

Saying that addon uses sass but the app using it dones't necessary has to have ember-cli-sass in its packages.json.

I've tried almost every solution that there is to be found on google, co I come here for the help :)

Lets say my addon name is awesome-tables, so if I put a css file in awesome-tables/addon/styles/addon.css the styles are concatenated into vendor.css as expected, but it doesn't work for sass / scss


Solution

  • For addons you should add @import intro your app.scss like next ( both from addons )

    @import 'ember-freestyle';
    @import "pod-styles";
    

    such instructions usually described in README.md for repo. If it's your repo - check next code https://github.com/ebryn/ember-component-css/blob/ae18f897d5b40ef1b3346d8857f6a1136d1b7b4b/lib/include-all.js#L56 as example ( https://github.com/ebryn/ember-component-css/ work with css/less/sass )

    P.S. check naming for addon styles https://github.com/aexmachina/ember-cli-sass

    Addon Development

    If you want to use ember-cli-sass in an addon and you want to distribute the compiled CSS it must be installed as a dependency so that addon/styles/addon.scss is compiled into dist/assets/vendor.css.

    P.P.S SASS with Ember CLI addons