fix: Issues with SASS imports and variables

[konradsienkowski]

🐛 The bug

Hey there,

while trying to implement the module in my application, I noticed two issues:

1. File scanning doesn't include imports while preparing fallbacks. For example, in nuxt.config.ts I'm adding the main stylesheet file:

css: ['~/assets/scss/main.scss'];

Within it, I'm importing two files with an @import rule:

@import 'fonts.scss';
@import 'typography.scss';

With such configuration, the output CSS file is not affected by the module (neither @font-face rules nor font-family: properties). However, if I add these two files explicitly in nuxt.config.ts:

css: ['~/assets/scss/fonts.scss', '~/assets/scss/typography.scss'],

I can see that both font-face rules and font-family properties were updated by the module.

2. Updating font-family properties doesn't work properly when these are set with variables. I've added a sass partial with variables in nuxt.config.ts, using vite preprocessor options (following Nuxt docs):

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "~/assets/scss/_variables.scss" as *;
          `,
        },
      },
    },
  },

Then, in typography.scss I'm using variable in font-family property:

h1 {
  font-family: $fontFamily, sans-serif;
}

which results in an output file/browser inspector:

h1 {
    font-family: "Poppins", "$fontFamily fallback", sans-serif;
}

🛠️ To reproduce

https://stackblitz.com/edit/github-x62ihe?file=nuxt.config.ts

🌈 Expected behaviour

It'd be great to have these working with a module or to have a further information on how to deal with imports/module configuration in such cases

ℹ️ Additional context

No response