Cannot style elements using CSS



  • 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


  • Admin

    @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.



  • 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)



  • 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>



  • 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 !



  • 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…


  • Admin

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



  • 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



  • 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…



  • 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.



  • the name order might not be the case…



  • 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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.