predictable order of CSS

[javierabadia]

Hi,

In ‘dev’ mode, my component styles always come after the quasar styles. They take precedence.
However in ‘build’ mode, quasar styles are compiled after the style in my components.

This causes problems in code like this:

<div class=“card my-card-style”>
…
</div>

.my-card-style {
margin-bottom: 50px;
}

because in ‘build’ mode this custom style is included before quasar styles and therefore overriden by .card styles

Alternatively, how can I modify the config of webpack to put quasar css styles in it’s own separate bundle?

Thanks!

[spectrolite]

I thought that would be a problem only if you’re overriding existing quasar classes. In your example you are not (my-card-style is not in quasar).
Are you really encountering this problem with this example, or are you over-simplifying your issue for the forum ?

[hctpbl]

This post is deleted!

[rstoenescu]

@javierabadia Please take a look at a barebones starter kit’s src/main.js. Notice the difference between require and import. Your problem should not exist if you use require for Quasar’s CSS.