cibernox/ember-power-select

can't import styles after upgrading from 6.0.x to 8.0.x

Closed this issue · 6 comments

jalligator commented

I realize this is likely an ember-cli-build problem with ember-cli-sass, but I've hit a wall

when I upgraded from ember-power-select 6 to 8 I was no longer able to specify just the package and had to specify the absolute path. I also had to decompile the bootstrap.scss file to get all the relative paths out because all paths in imported files need to be absolute.

// @import 'ember-power-select/themes/bootstrap';
// @import 'ember-power-select';
@import 'node_modules/ember-power-select/themes/bootstrap';
@import 'node_modules/ember-power-select/scss/variables';
@import 'node_modules/ember-basic-dropdown/ember-basic-dropdown';
@import 'node_modules/ember-power-select/scss/base';

I see that the file structure has changed and no longer has app/styles. Is there anything I can do to get back to the documented behavior?

Thanks,
John

mkszepp commented

@jalligator i need more details to help you.

Do you have any sassOptions set inside your ember-cli-build.js?

Which sass package are you using? (node-sass or dart-sass or any other?) => If you don't have dart-scss i recommend you to move to that, because all other sass packages are deprecated.

A possible workaround for your issue is to add this options inside ember-cli-build.js:

sassOptions: {
      includePaths: ['node_modules/ember-basic-dropdown/', 'node_modules/ember-power-select/'],
    },
jalligator commented

@mkszepp thank you for your time!

I'm using sass 1.80.6 which it says is dart-sass.

I actually made a new ember app and everything worked exactly per the power-select documentation. I was able to just import 'ember-power-select'

I went very carefully through ember-cli-build, and even copy and pasted the import statements to make sure there wasn't a typo. The clean app worked just fine, but I simply cannot find what is different between my legacy app I'm updating and the new app. I even npm ls to check versions and they're all the same.

Your workaround works as does explicitly importing from node_modules, but I can't figure out why it can't find the files. Everything works fine on version 6 of ember-power-select too when it had the app / add-on file structure. And I can import from ember-bootstrap/boostrap fine.

Thanks again for any insight. Here's some more output from the error log:

/var/folders/qk/tvn88gsj0zj8r37qwlk7d2nc0000gn/T/broccoli-75900eay2IInhP7Zs/out-429-funnel_funnel_styles/app/styles/app.scss 17:9 root stylesheet
at SassCompiler

  • errorType: Sass Syntax Error
  • location:
    • column: 9
    • file: /var/folders/qk/tvn88gsj0zj8r37qwlk7d2nc0000gn/T/broccoli-75900eay2IInhP7Zs/out-429-funnel_funnel_styles//app/styles/app.scss
    • line: 17
    • treeDir: [undefined]
  • message: /var/folders/qk/tvn88gsj0zj8r37qwlk7d2nc0000gn/T/broccoli-75900eay2IInhP7Zs/out-429-funnel_funnel_styles//app/styles/app.scss:17:10: Error: Can't find stylesheet to import.
    ╷
    17 │ @import 'ember-power-select/themes/bootstrap';
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  • 👍1
mkszepp commented

Thats fine, when you are using already latest dart-sass... i know that your issue was already in some apps in older versions...

Can you check if some addon brings your a older version of ember-power-select as dependency?

jalligator commented

I can confirm that no other version of ember-power-select is in the dependency tree. In fact, I copied the dependency list from package.json on the legacy app to my new test app and the test app still worked correctly. I made to sure to delete dist and node_modules to make sure a newer version of some package wasn't still in node_modules. So I don't think it is a package version issue.

I also tried deleting the dist and node_module directories in the legacy app and I still get the import error.

I do use import for other stylesheets in packages and those work fine but they are all Ember v1 add-on styles.

mkszepp commented

Did you also removed the package lock in app or?

If you did that and it wasn't working, so i think it must be any configuration inside ember-cli-build.js or enviroment.js

Can you maybe check this files?

jalligator commented

I verified once more that I deleted node_modules and package lock at the same time and reran npm install.

The import now works. I could swear I had already done that, but I must not have.

Thank you for your time! I love the add-on!

  • 👍1