Stencil imports only one stylesheet

[ghost]

Stencil version:

"@stencil/core": "^1.11.3"

I'm submitting a:

[ X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: When I try to import a few "css" files, only the first one is applied.

styleUrls: [
    'my-component.css',
    'another-styles.css', // These styles will not apply
  ],

Expected behavior: All styles specified in the styleUrls are working.

Steps to reproduce: Use https://github.com/KhaydarshinAleksandr/stencil-example/blob/master/src/components/my-component/my-component.tsx

Other information: In version 1.9.0, the bug does not present

[alex-ketch]

@KhaydarshinAleksandr That's not quite how the styleUrls property works. It's for setting alternate stylesheets based on the component's mode. Take a look at this example.

If you want to import multiple stylesheets, I think the easiest would be to do the imports in your CSS files, instead of the component TSX.

[ghost]

@alex-ketch, thank you for reply. I think that since interface styleUrls looks like styleUrls?: string[] | d.ModeStyles; , we can use multiple stylesheets at once. Moreover it worked in earlier versions.

But your approach can be used as a temporary solution, thanks

[davidenke]

@KhaydarshinAleksandr is right, the typings indicate that multiple stylesheets can be loaded. I use it to structure component styles for different viewports/media queries. It's also not quite obvious how mode styles can be defined as arrays, instead of key-value pairs of mode name and url (d.ModeStyles)...

[ghost]

Any updates of this issue?

I don't want do import in CSS files

[LukePammant]

My problem when importing the CSS files is that firefox applies the CSS after my inline so the external CSS (i.e. bootstrap) overrides my internal CSS w/ my custom bootstrap overrides. If I could get the

[rwaskiewicz]

👋 If someone would be willing/able to create a minimal reproduction case with the latest version of Stencil, the team would be happy to take a look. It appears the original repro has disappeared, likely due to the time it took for someone to ack this ticket 😢

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!