Cannot style elements using CSS

[chiragiem36]

I cannot style elements/template using CSS inside styles (<style></style>)
Styling elements inside tag is working (<p style=“color: black” ), but now with CSS

[rstoenescu]

@chiragiem36 You are definitely doing a misuse somewhere. Can you post a reproduction repo so we can all take a look and help you? Thanks.

[NoRabbit]

Have the same problem, quasar.mat.styl seems to be taken after the style set in Hello.vue (for ex.)
see chrome css inspector: https://pasteboard.co/GQ8KuxG.png
(I’m in dev, not prod)

[NoRabbit]

just so this is complete:
I set my class on a button component like this: <q-btn flat class=“main-toolbar-btn”>
and at the bottom of my Hello.vue file:
<style lang=“stylus”>
.main-toolbar-btn
width 70px
border-left-width 1px
height 98px
border-left-color #dcdada
border-left-style solid
margin 0
color #4d5154
</style>

[NoRabbit]

and putting the style in the app.mat.styl does the same
basically, I’m trying to override the margin set in quasar.mat.styl at 2991:

.q-btn
margin 0 .2rem
padding .2rem

Maybe there is some basic css rules that just make it like so but having to put it in the style tag would be quite annoying as it would totally remove the advantage of using css.

thx !

[NoRabbit]

but if I override the exact same declaration found in quasar.mat.style (@2991) in my app.mat.styl like so:
.q-toolbar

.q-btn
margin 0

it works…
So the best thing I can do is this:
.q-toolbar

.q-btn
&.main-toolbar-btn
width 70px
border-left-width 1px
height 98px
border-left-color #dcdada
border-left-style solid
margin 0
color #4d5154

but this is kind of uncomfortable as I really need to specifically target classes…

[rstoenescu]

Can you confirm you are using the latest default starter kit? Quasar’s CSS should always come first and then component’s CSS.

[NoRabbit]

at the date I wrote it, yes I took the latest default starter kit (followed the instruction on the website and it was the very first time I used quasar)
can you point me where I should be looking to make the change ? some config file I guess or the hot reload module…
thx

[NoRabbit]

if you can find a solution to this, it would be awesome because this is becoming a real deal breaker for me.
I don’t know if it has to do with the webpack vue template compiler because it seems that no one is willing to fix the issue… (on github)
and using scoped css creates more problems than it solves.

If I can be of any help, just tell me in wich files I should be looking into, I’ll try to understand this webpack horrible beast…

[NoRabbit]

so to summarize, this has to do with how the css is imported into the html in dev mode (hope this is not doing it in prod as well)
quasar style comes after some of my components style.
It appears that the styles are ordered by name… so if I have “Program.vue” and “User.vue”, the styles from Program will come before Quasar styles and the styles from User will come after.

[NoRabbit]

the name order might not be the case…

[NoRabbit]

Allright, it’s solved, at least for me.
I was importing the quasar style in a component (bad idea, don’t know why I did that in the first place) as I saw it referenced twice in the head section of my page (doesn’t webpack check on double references ?)
Now everything is working fine.
Sorry for that