@import not working in addon with ember-cli-sass

Question

Addon has

// app/styles/my-addon.scss within addon
@import 'pods';
.testing123 .my-addon {
  color: white
}

// app/styles/pods.scss within addon
// @import 'some components go here';
.testing123 .pods {
  color: black
}

This works in the addon's dummy app. However when I build it into a real app:

// app/styles/app.scss
@import 'my-addon';

Now my app css contains

.testing123 .my-addon {
  color: white
}
// expect to see .texting123 .pods _but don't_

ember-cli-sass ^7.2.0 and ember-cli-sass-pods ^1.3.0 are both in addon's dependencies.

What am I doing wrong?

Edit 29th August 2018

Removed ember-cli-sass-pods and replaced with ember-component-css. Moved all sass into from app/... to addon/... and now everything is working (but of course I lose the ability to change sass variables in the app). But at least I can release.

Is the sass addon a devDependency in package.json? Try making it a dependency instead. — handlebears
Did you do all the addon specific steps in the README? Is the import at the very top of your file? (No comments above it) github.com/aexmachina/ember-cli-sass/blob/master/README.md — handlebears

Alon Bukai Alon Bukai · Accepted Answer · 2018-08-27T06:02:02

This is probably because you have your styles defined in the addon folder and not the app folder.

Move your styles folder inside the addon folder into the app folder and try again.

Your styles will still be available in the addon and in the test dummy app but will not also be exported out to any app using your addon.

@import not working in addon with ember-cli-sass

1 Answers