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
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.