Vue项目使用sass插值为动画添加动态名称报错

Vue项目使用sass插值为动画添加动态名称报错

@mixin borderOpen($name,$x,$y,$time,$delay,$size) {
    animation: $name $time + s $delay + s forwards;
    @keyframes #{$name} {
        0%{
            width: 0;
            height: 0;
        }
        50%{
            width: $x + px;
            height: 0;
        }
        100%{
            width: $x + px;
            height: $y + px;
        }
    }
}

尝试过更换sass-loader版本还是不行，但是在非vue项目单纯html文件中这样使用是没有问题的