martodox martodox - 3 months ago 87
Sass (Sass) Question

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

Answer

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