Sass / Vue: "@use rules must be written before any other rules"

Question

Trying to import "sass:colors" to my colors.scss stylesheet, I get SassError: "@use rules must be written before any other rules", even though it's the first line of my file. I suspect the line is being processed late by Vue after some kind of Sass compilation.

In my root directory is my vue.config.js where I have

module.exports = {
  ...
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/styles/colors.scss";
          @import "~@/styles/overrides.scss";
        `,
      },
    },
  },
  ...
}

Then in src/styles/ I have colors.scss and overrides.scss where I import colors into overrides. Lastly, I also have src/plugins/vuetify.ts where I import colors (after Vue and Vuetify) to use in a custom theme.

Any idea how to properly import the sass:colors module as to avoid the SassError?

Answer 1

SassError: "@use rules must be written before any other rules", so change your first rules to be @use

module.exports = {
  ...
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
          @use "@/styles/colors.scss" as *;
          @use "@/styles/overrides.scss" as *;
        `,
      },
    },
  },
  ...
}