Failed to compile sass and media query

[javierrodrigo]

Hi, I don´t know why this is giving error. I am using the v2.0.0-beta3. If I remove the @media… it works. I am following a tutorial based on v1…

<style lang="sass">
  .q-toolbar__title
    font-size: 30px
    @media (max-width: $breakpoint-xs-max)
      text-align: center
  .q-footer
    .q-tab__icon
      font-size: 30px
</style>

[javierrodrigo]

This is the error I get

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Nothing may be indented beneath a @import rule.
╷
3 │ .q-toolbar__title
│ ^
╵
src\layouts\MainLayout.vue 3:3 root stylesheet

[javierrodrigo]

I found a solution… apparently I have to add a ‘$’ somewhere…

<style lang=“sass”>
// $
.q-toolbar__title
font-size: 30px
@media (max-width: $breakpoint-xs-max)
text-align: center
.q-footer
.q-tab__icon
font-size: 30px
</style>

[javierrodrigo]

Sorry, but it is not giving error but it does not work…

[javierrodrigo]

I have tried with quasar 2.1.14 and it does work with this style, however in the 3.0.0-beta.3 it does not

<style lang="sass">
  .q-toolbar__title
    font-size: 30px
    @media (max-width: $breakpoint-xs-max)
      text-align: center
  .q-footer
    .q-tab__icon
      font-size: 30px
</style>

[dobbel]

@javierrodrigo

You could check is there’s an existing github issue open for your issue with Qv3.
If not then you could create an issue with your findings.
Please mention in the post title that you’re using Quasar beta V3.

[javierrodrigo]

I don´t know how to do that… can you point me in the right direction?

I have changed it to scss and it works

<style lang="scss">
  .q-toolbar__title{
    font-size: 30px;
    @media (max-width: $breakpoint-xs-max){
      text-align: center;
    }
  }
</style>

[dobbel]

@javierrodrigo

Good you found a work around.

Here’s a guide to post github issues:
https://docs.github.com/en/github/managing-your-work-on-github/creating-an-issue

Here’s Quasar’s github repo where you can post an issue:
https://github.com/quasarframework/quasar

Also handy this page with quasar resources:
https://github.com/quasarframework/quasar-awesome

[javierrodrigo]

Solved.

https://github.com/quasarframework/quasar/issues/8457

It should be written as:

<style lang="sass">
.q-toolbar__title
  font-size: 30px
  @media (max-width: $breakpoint-xs-max)
    text-align: center
.q-footer
  .q-tab__icon
    font-size: 30px
</style>