SASS Issues

[jackmatt2]

I installed broccoli-sass as per the instructions but then I can't start the server because it complains about tmp/app/styles/app.[scss|sass] not existing in my project. I don't want to use sass in my own application. Is there a workaround for this?

This seems like it might be a ember-cli issue as I can't see how an addon can dictate how to consuming application should format it's css code.

[lolmaus]

@jackmatt2, it is an Ember CLI issue: ember-cli/ember-cli#2363

I'm running into a different issue with Sass. My project relies on ember-cli-compass-compiler because i prefer Ruby Sass to libsass.

ember-cli-compass-compiler cannot be used together with broccoli-sass. This wasn't an issue in Ember CLI 0.1.15 and below, but after upgrading to Ember CLI 0.2.0 i have no option but to remove ember-cli-notifications. :(

It's a huge disappointment, after ember-cli-notifications proved itself to be a simple and useful addon.

So my request is either to switch to plain CSS stylesheets or somehow make the Sass compiler configurable, allowing to switch between broccoli-sass, broccoli-ruby-sass and ember-cli-compass-compiler.

[griffind]

@jackmatt2 I ran into this problem as well, and to rectify it for the time being, I just added a blank app.scss file to my styles directory.

[ynnoj]

I'm going to change the way the SCSS is handled when I have some time.

[lolmaus]

There's another issue with broccoli-sass: joliss/broccoli-sass#52

I wish i didn't have this dependency in my project, ember-cli-notifications is the only addon that requires it.

[jackmatt2]

I have had to alter the addon manually to remove the sass files and instead use regular css code. Simply adding an empty app.scss did not work for me, I continued to get other errors.

@ynnoj here is the plain CSS that is working for me.

@-webkit-keyframes notification-show{0%{opacity:0;-webkit-transform:perspective(450px) translate(0,-30px) rotateX(90deg);transform:perspective(450px) translate(0,-30px) rotateX(90deg)}100%{opacity:1;-webkit-transform:perspective(450px) translate(0,0) rotateX(0deg);transform:perspective(450px) translate(0,0) rotateX(0deg)}}@keyframes notification-show{0%{opacity:0;-webkit-transform:perspective(450px) translate(0,-30px) rotateX(90deg);transform:perspective(450px) translate(0,-30px) rotateX(90deg)}100%{opacity:1;-webkit-transform:perspective(450px) translate(0,0) rotateX(0deg);transform:perspective(450px) translate(0,0) rotateX(0deg)}}@-webkit-keyframes notification-shrink{0%{opacity:0;max-height:800px;margin-bottom:2px;-webkit-transform:scale(0.8);transform:scale(0.8)}100%{opacity:0;max-height:0;margin-bottom:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@keyframes notification-shrink{0%{opacity:0;max-height:800px;margin-bottom:2px;-webkit-transform:scale(0.8);transform:scale(0.8)}100%{opacity:0;max-height:0;margin-bottom:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@-webkit-keyframes notification-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@keyframes notification-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@-webkit-keyframes notification-countdown{0%{width:100%}100%{width:0}}@keyframes notification-countdown{0%{opacity:1;width:100%}100%{opacity:0;width:0}}.notifications-container{position:fixed;top:10px;right:0;left:0;z-index:1060;width:80%;max-width:400px;margin:auto}.notification{font:14px Helvetica,sans-serif;position:relative;overflow:hidden;border-radius:4px;margin-bottom:2px;max-height:800px;color:#fff;-webkit-animation:notification-hide 250ms cubic-bezier(0.33859,-.42,1,-.22),notification-shrink 250ms 250ms cubic-bezier(0.5,0,0,1);animation:notification-hide 250ms cubic-bezier(0.33859,-.42,1,-.22),notification-shrink 250ms 250ms cubic-bezier(0.5,0,0,1)}.notification.in{-webkit-animation:notification-show 180ms cubic-bezier(0.175,.885,.32,1.27499);animation:notification-show 180ms cubic-bezier(0.175,.885,.32,1.27499)}.notification-icon{position:absolute;left:0;top:0;height:100%;width:30px;color:rgba(255,255,255,.74);text-align:center}.notification-icon span{position:relative;top:10px}.notification-content{padding-top:10px;padding-bottom:10px;padding-left:40px}.notification-content.dismissable{padding-right:30px}.notification-close{position:absolute;top:10px;right:10px;opacity:.3;cursor:pointer}.notification-close:focus,.notification-close:hover{opacity:1}.notification-countdown{position:absolute;bottom:0;width:0;height:4px;-webkit-animation:notification-countdown linear 1;animation:notification-countdown linear 1}.notification.info{background-color:#3ea2ff}.notification.info .notification-icon{background-color:#067cea}.notification.info .notification-countdown{background-color:#71bbff}.notification.info .notification-close{color:#067cea}.notification.success{background-color:#64ce83}.notification.success .notification-icon{background-color:#3da95c}.notification.success .notification-countdown{background-color:#8bdaa2}.notification.success .notification-close{color:#3da95c}.notification.error{background-color:#e74c3c}.notification.error .notification-icon{background-color:#ba2c1d}.notification.error .notification-countdown{background-color:#ed7669}.notification.error .notification-close{color:#ba2c1d}.notification.warning{background-color:#ff7f48}.notification.warning .notification-icon{background-color:#f44e06}.notification.warning .notification-countdown{background-color:#ffa37b}.notification.warning .notification-close{color:#f44e06}

Can I suggest converting to this until ember-cli is fixed?

[ynnoj]

@jackmatt2 I hope to get to this over the weekend or next week.