Does not work scss variables when I change the directory path css in quasar.config.js

What happened?

quasar.variables.scss(src/app/styles):

$app-bg-color: #f2f8ff;

Global variable in component:

<template>
  <div class="c"></div>
</template>

<style lang="scss">
.c {
  background: $app-bg-color;
}
</style>

But, I have error:

Syntax Error: SassError: Undefined variable.

It only works if you import a file with variables wherever variables are used.

Quasar config:

{
  css: [
    '../app/styles/app.scss',
    '../app/styles/width.scss',
  ],
}

// or

{
  css: [
    '../app/css/app.scss',
    '../app/css/width.scss',
  ],
}

What did you expect to happen?

I use variables as before

Reproduction URL

https://stackblitz.com/edit/quasarframework-webpack-nvwe18?file=src/app/css/quasar.variables.scss

How to reproduce?

Follow the link above

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Hi,

quasar.variables.scss needs to be in its original place (src/css) otherwise it’s like you’re not using this feature.

[doox911]

Hi,

quasar.variables.scss needs to be in its original place (src/css) otherwise it’s like you’re not using this feature.

Can I add a parameter to the configuration?

https://github.com/quasarframework/quasar/blob/dev/app-webpack/lib/webpack/create-chain.js

  injectStyleRules(chain, {
    isServerBuild: configName === webpackNames.ssr.serverSide,
    rtl: cfg.build.rtl,
    sourceMap: cfg.build.sourceMap,
    extract: cfg.build.extractCSS,
    minify: cfg.build.minify,
    stylusLoaderOptions: cfg.build.stylusLoaderOptions,
    sassLoaderOptions: cfg.build.sassLoaderOptions,
    scssLoaderOptions: cfg.build.scssLoaderOptions,
    lessLoaderOptions: cfg.build.lessLoaderOptions
  })

Add in cfg.build.sassLoaderOptions and cfg.build.scssLoaderOptions new property - CSS_VARIABLES_PATH from quasar.config.js.

Then we could throw them in https://github.com/quasarframework/quasar/blob/dev/app-webpack/lib/helpers/css-variables.js through https://github.com/quasarframework/quasar/blob/dev/app-webpack/lib/webpack/inject.style-rules.js.

  appFile(CSS_VARIABLES_PATH):  => ({
    scss: fs.existsSync(appPaths.resolve.src(`${CSS_VARIABLES_PATH}/quasar.variables.scss`)),
    sass: fs.existsSync(appPaths.resolve.src(`${CSS_VARIABLES_PATH}/quasar.variables.sass`))
  }),

This is an example. If you think about it, it can be done more elegantly.