app.scss does not allow use of variables

[ea-ncu]

What happened?

The primary app.scss file does not allow you to use any global variables, even if you have them imported, or even declared within the same file.

I have set up a project using the Quasar CLI and made the following changes:
Declare new global variables in quasar.variables.scss
Add body.body--dark styling to app.scss using variables declared in quasar.variables.scss
Change quasar.config.js to force dark mode

Even the variables already declared such as $primary amongst others are not accessible in app.scss

You can declare the variable within app.scss and it still will not be picked up.

What did you expect to happen?

I was expecting to be able to use variables in app.scss, whether they are imported or declared at top level.

Reproduction URL

https://codesandbox.io/p/github/eancuta/quasar-scss-bug/master?file=%2FREADME.md&workspace=%257B%2522activeFilepath%2522%253A%2522%252FREADME.md%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%252C%2522%252Fquasar.config.js%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clggeln6l000x286dbldmjdg9%2522%253A%257B%2522key%2522%253A%2522clggeln6l000x286dbldmjdg9%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clggezq560014286dwyc4fp3p%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A9000%252C%2522key%2522%253A%2522clggelss9006e286dcz9cjfni%2522%252C%2522isMinimized%2522%253Afalse%252C%2522path%2522%253A%2522%252F%2523%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clggelrp7003t286df2vf5qcr%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clggeln6l000x286dbldmjdg9%2522%252C%2522spacesOrder%2522%253A%255B%2522clggeln6l000x286dbldmjdg9%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

How to reproduce?

1. Access Codesandbox link
2. Wait for page to render - should be in dark mode automatically
3. Note the colours declared in scss files mentioned in description. Top level bar should be green, not black
4. Change to light mode and note that the top level bar is red
5. Change back to dark mode, update app.scss body.body--dark --q-primary to green (hard code colour)
6. Note that top bar now changes to green
7. Declare variable in app.scss above, any name, and try to use it in place of --q-primary, note that value does not register

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Style & Identity (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Linux(5.19.0-38-generic) - linux/x64
NodeJs - 16.18.1

Global packages
  NPM - 8.19.2
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.2.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.47 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.34 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.38.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - eancuwork
  wlp54s0 - 192.168.0.6

Relevant log output

No response

Additional context

No response

[rstoenescu]

The correct syntax for Sass is:

body.body--dark {
  --q-primary: #{$dark-primary};
  --q-secondary: #{$dark-primary};
  --q-accent: #{$dark-primary};
  --q-positive: #{$dark-primary};
  --q-negative: #{$dark-primary};
  --q-info: #{$dark-primary};
  --q-warning: #{$dark-primary};
}

Notice the native css variables values are declared by surrounding them with #{ and }, otherwise they are passed in right as you declare them (with the "$dark-primary" string) and not evaluated by Sass.

Also, VERY important. Do NOT import "quasar.variables" yourself. That is being done automatically for you by Quasar CLI. But I assume that was because you thought that the feature did not work.

[ea-ncu]

Hi @rstoenescu , thanks for your response, that makes sense. I was thrown off by it because my IDE was able to pick up the imports just fine, but I appreciate the feedback espescially as it's Sass related and not Quasar.

Yes, you are right that I imported it to play around with trying to get it to work.