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

**URL:** <https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382>\
**Category:** Uncategorized\
**Created:** [November 24, 2020, 2:07pm UTC](https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382 "2020-11-24T14:07:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)\
**Post date:** [November 24, 2020, 2:07pm UTC](https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382/1 "2020-11-24T14:07:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [November 27, 2020, 4:00pm UTC](https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382/2 "2020-11-27T16:00:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)\
**Post date:** [November 28, 2020, 11:54am UTC](https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382/3 "2020-11-28T11:54:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [November 28, 2020, 11:20pm UTC](https://discuss.emberjs.com/t/imports-not-working-for-ember-cli-sass-in-my-addon/18382/4 "2020-11-28T23:20:24Z")

</div>

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.