Imports not working for ember-cli-sass in my addon

1

Hi I have an addon which has addon.scss in addon/styles/addon.scss. In my app which tests the addon, I simply have an app.scss. The scss in addon.scss displays on the UI if the imports are not there, however I have two imports which are not building when I add them - namely ember-power-select and @addepar/style-toolbox.

I get the error

Sass Syntax Error (SassCompiler) in /home/…/my-addon/my-addon/addon/styles//addon.scss:1:9 Error: Can’t find stylesheet to import 1 │ @import ‘ember-power-select’;

I tried editing my ember-cli-build.js to include sassOptions: {

//   includePaths: [
//     'node_modules/ember-power-select/app/styles/',
//     'node_modules/@addepar/style-toolbox/'
//   ],
//   onlyIncluded: false
// }

But no luck. I also tried creating addon-name.scss in app/styles and importing that from the app, but that does not reflect any of my scss on the UI even though it builds.

Please help a newbie out.

2

Hi @alyssa21, one idea is to check whether your addon is including ember-power-select in dependencies vs devDependencies. It needs to be in dependencies for things like this to work correctly.

Another thing to check is that if your addon implements included, be sure it is correctly calling _super. Breaking that can break “inner” nested addons.

1 Like
3

HI @ef4 Its in dependencies and i think I implemented included correctly. I implemented it like this:

module.exports = {
  name: require('./package').name,
  included () {
    this._super.included.apply(this, arguments);
  },
  contentFor(type, config) {
    let emberPowerSelect = this.addons.find((a) => a.name === 'ember-power-select');
    return emberPowerSelect.contentFor(type,config);
  }
};

Is this correct? Any other possible ways to fix this? Been going through similar issues on the web with no luck

4

Yes, that looks correct.

Hmm, I would ask in an issue on ember-power-select repo. There may be a reason they don’t want to support this pattern, because if an addon imports and customizes the ember-power-select scss styles, that takes away the ability for apps that use the addon to also configure them without conflicting.

1 Like