@use rules must be written before any other rules.

[Hai-San]

Project: Vue3 + Vite + Jest

Problem: I have many components that use SASS @use and I have a global SCSS with SCSS variables that are used in multiple components. In vue-jest the problem is that @import is forced to be used and SASS has a problem that we cannot use @import before @use

Current jest.config.js

  globals: {
    'vue-jest': {
      resources: {
        scss: ['myCssVars.scss'],
      },
    },
  },

What would be ideal?

  globals: {
    'vue-jest': {
      resources: {
        scss: `@use "myCssVars.scss" as *;`,
      },
    },
  },

I looked a lot and couldn't find a way to load the global SCSS with @use instead of @import.

I was able to configure normally in all other parts of the project, the only point that had a problem was with jest.