this my config in vue.config.js 
css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "~@/assets/styles/_styles.scss" as *;`
      },
    },
    extract: { ignoreOrder: true },
  },

my _stlye.css file :
@use "**/reset" as *;
@use "**/utilities" as *;
@use "**/colors" as *;
@use "**/mixins" as *;
i use @use replace @import, project can't run now, my console shows the following
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
11 │   @include size(100%, 100%);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^
SassError: Undefined $green_300.
         $green_300