[Vuejs]-How to prepend scss files in Vue3 + dart-sass?

If it’s any help i did this with node-sass in my webpack config:

  {
    test: /\.scss$/,
    use: [
      env.production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
      {
        loader: 'css-loader',
        options: {
          url: false,
        }
      },
      {
        loader: 'sass-loader',
        options: {
          additionalData:`
          @import "css/base/colors.scss";
          @import "css/settings.scss";
          @import "css/font-definitions";
          `
        },
      },
    ],
  },

With that I can use any of the variables defined from the files in additionalData in vue files.

Hello I’m using the next code, this appears in the documentation of VUE CLI GotoDocumentationVueCLI

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      // @/ is an alias to src/
      // so this assumes you have a file named `src/variables.sass`
      // Note: this option is named as "prependData" in sass-loader v8
      sass: {
        additionalData: `@import "~@/variables.sass"`
      },
      // by default the `sass` option will apply to both syntaxes
      // because `scss` syntax is also processed by sass-loader underlyingly
      // but when configuring the `prependData` option
      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
      // in that case, we can target the `scss` syntax separately using the `scss` option
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // pass Less.js Options to less-loader
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}