Power select options and style broken after using app.scss along with app.css

1

I’m new so please excuse the vagueness. I have been using ember-table and so I added an app.scss for ember-cli-sass so that my table is nicely styled. So now I have app.css and app.scss in the styles folder. But now my power selects aren’t showing me options and some of the styling is broken in the parent route of the route with the table. I need to have the app.scss in order for the table to be nicely styled apparently.

I tried adding to ember-cli-build but no luck. Really stressed about this and appreciate the help as a newbie!

any workaround?

2

I don’t think you should have both files. My guess is that app.scss is being compiled to app.css at build time and clobbering the other app.css. I think anything that’s in app.css should be moved to app.scss so you just have the one “app-level” css file.

3

That fixed some things but the power select is still not showing any options :confused: Any other possible things to try?

4

Are you using custom power select styles? And are you using the styles that ship with power select? I would definitely read over this page. My guess is that it detected you have a preprocessor installed and so it stopped shipping the pre-compiled CSS. So you should import the power select styles in your app.scss e.g.

@import 'ember-power-select';
1 Like
5

Ah adding that import solved it! I didn’t know that could happen even when using the default style (didnt add any custom styling). Thank you!

6

Yeah I think that’s specifically a power select feature where it detects preprocessors and stops including its own css. CSS is tricky to manage with addons sometimes, power select is particularly fancy about it. Anyway, glad you got it figured out!

7

Useful topic, thanks to all!

8

@dknutsen Hopefully its alright if I reply on this post relating to the same app.

I’m trying to make an addon for this app, and starting with making an addon component and im getting this: Uncaught (in promise) Error: Compile Error: Cannot find component power-select-multiple.

So far, i simply used the ember-cli generators to copy and paste my component code. Also since my app uses app.scss for styling, I just created an app.scss in addon/styles and that imports power-select. So Im confused about why im getting this error in the console and not seeing anything render

9

Hopefully its alright if I reply on this post relating to the same app.

Of course!

My guess is that now your addon is dependent on power select, but power select isn’t listed in the addon’s dependencies. An addon is a separate package, and to maintain compatibility with any app that consumes it it needs to provide it’s own dependencies. So if it’s a “full” addon in its own project you can add power select to the “dependencies” hash in package.json, if it’s an in-repo addon you just need to “forward” (not sure if that’s the right word i’m just making it up) the dependency from the host app e.g.

  "dependencies": {
    ...
    "ember-power-select": "*"
  }
11

ah thank you! I had mistakenly added it to devDependencies.