Cannot use quasar css variables in a imported file by viteConf's additionalData

[zeodtr]

In my project, a common scss file is imported by viteConf's additionalData, as follows:

            extendViteConf(viteConf) {
                if (viteConf.css === undefined) viteConf.css = {};
                if (viteConf.css.preprocessorOptions === undefined)
                    viteConf.css.preprocessorOptions = {};
                if (viteConf.css.preprocessorOptions.scss === undefined)
                    viteConf.css.preprocessorOptions.scss = {};
                viteConf.css.preprocessorOptions.scss.additionalData = `
                    @import 'css/_Common.scss';
                    `;
            },

The problem is, I cannot use quasar css variables in _Common.scss.
For Example, the following line does not compile with the message: 'Error: Undefined variable.'

$redcolor: $red;

But when the file is directly imported in a .vue file as follows, it is Ok.

<style
    lang="scss"
    scoped
>
@import 'css/_Common.scss';
...

How can I use quasar css variables in a imported file by viteConf's additionalData?

Thank you.

[zeodtr]

I found the reason myself.

The plugin that quasar adds to the vite config adds the following import code before the additionalData is prepended.

@import 'src/css/quasar.variables.scss';
@import 'quasar/src/css/variables.sass';

So, the resulting scss code becomes as follows:

@import 'css/_Common.scss';
@import 'src/css/quasar.variables.scss';
@import 'quasar/src/css/variables.sass';

But the correct import order should be as follows:

@import 'src/css/quasar.variables.scss';
@import 'quasar/src/css/variables.sass';
@import 'css/_Common.scss';

So, you must implement a function that insert the import line to the correct location for additionalData config, rather than just supply a string.