# Power select options and style broken after using app.scss along with app.css
**URL:** https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340
**Category:** Uncategorized
**Created:** [November 10, 2020, 4:04am UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340 "2020-11-10T04:04:11Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 10, 2020, 4:04am UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/1 "2020-11-10T04:04:11Z")
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?
---
### Author:  [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 10, 2020, 3:28pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/2 "2020-11-10T15:28:38Z")
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.
---
### Author:  [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 10, 2020, 10:27pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/3 "2020-11-10T22:27:29Z")
That fixed some things but the power select is still not showing any options 😕 Any other possible things to try?
---
### Author:  [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 10, 2020, 10:33pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/4 "2020-11-10T22:33:24Z")
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](https://ember-power-select.com/docs/styles). 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.
```auto
@import 'ember-power-select';
```
---
### Author:  [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 10, 2020, 10:38pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/5 "2020-11-10T22:38:31Z")
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!
---
### Author:  [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 10, 2020, 11:30pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/6 "2020-11-10T23:30:30Z")
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!
---
### Author:  [@WilliamImel](https://discuss.emberjs.com/u/WilliamImel)
#### Post date: [November 16, 2020, 6:07pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/7 "2020-11-16T18:07:09Z")
Useful topic, thanks to all!
---
### Author:  [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 17, 2020, 2:41pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/8 "2020-11-17T14:41:30Z")
@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
---
### Author:  [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 17, 2020, 4:51pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/9 "2020-11-17T16:51:41Z")
> 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.
```auto
"dependencies": {
...
"ember-power-select": "*"
}
```
---
### Author:  [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 17, 2020, 9:45pm UTC](https://discuss.emberjs.com/t/power-select-options-and-style-broken-after-using-app-scss-along-with-app-css/18340/11 "2020-11-17T21:45:27Z")
ah thank you! I had mistakenly added it to devDependencies.