how to use "sass:meta" in sass-loader on vue component

I have the next error on my component

SassError: Invalid CSS after "... $color in meta": expected expression (e.g. 1px, bold), was ".keywords($args) {" on line 5 of src/assets/scss/components/_dMetricCircle.scss from line 101 of src/components/UI/DMetricCircle.vue @each $name, $color in meta.keywords($args) {

and this is my _dMetricCircle.scss

@use "sass:meta";

@mixin test-mixin($args...){

    @each $name, $color in meta.keywords($args) {
        .#{$name} {
            background-color: map-get($color, "bgcolor");
            border: 1px solid map-get($color, "border");

            @if map-has-key($color, "pcolor") {
                &.percent{
                background: linear-gradient(var(--v), map-get($color, "pcolor") 50%, transparent 0) center/calc(var(--s) * 100%) border-box,
                linear-gradient(var(--v), map-get($color, "bgcolor") 50%, transparent 0) center/calc(100% - var(--s) * 100%) border-box,
                linear-gradient(to right, map-get($color, "pcolor") 50%, map-get($color, "bgcolor") 0) border-box;
                }
            }
        }
    }
}

and on my DMetricCircle component, I import and use the mixin like this

@include test-mixin(
  $default: ("bgcolor": $gray-lighten-45, "border": $gray-lighten-30),
  $success: ("bgcolor": $success-lighten-50, "border": $success-lighten-20, "pcolor": $gray-lighten-45),)

So, I don't know if sass-loader doesn't supper the use of meta or I'm doing a wrong use of sass compiler

"node-sass": "4.14.1","sass-loader": "10.0.2"