如何在 vue 组件的 sass-loader 中使用“sass:meta”

问题描述

我的组件出现下一个错误

SassError: Invalid CSS after "... $color in Meta": 预期的表达式（例如 1px，粗体），是 ".keywords($args) {" 在 src/assets/scss/components/_dMetricCircle.scss 的第 5 行 来自 src/components/UI/DMetricCircle.vue 的第 101 行 @each $name,$color in Meta.keywords($args) {

这是我的 _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),"bgcolor") 50%,transparent 0) center/calc(100% - var(--s) * 100%) border-Box,linear-gradient(to right,"bgcolor") 0) border-Box;
                }
            }
        }
    }
}

在我的 DMetricCircle 组件上，我像这样导入并使用 mixin

@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),)

所以，我不知道是不是 sass-loader 不支持 Meta 的使用，还是我对 sass 编译器的使用有误

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）