Imports not working in my addon

[ssona09]

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.

[sebastianhelbig]

Nothing needed in ember-cli-build.js. In addon.scss just add:

@import 'node_modules/ember-power-select/app/styles/ember-power-select/variables';
@import 'node_modules/ember-basic-dropdown/app/styles/ember-basic-dropdown';
@import 'node_modules/ember-power-select/app/styles/ember-power-select/base';

Depending on your folder structure you may need to change to ../node_modules/… or something like that.