从node-sass转到dart sass后，编译器在关键帧 mixin中抛出错误

Question

我不得不在我的项目中更换sass编译器。我以前用的是node-sass，现在我需要把它改成dart sass。

我基本上已经完成了，它在 webpack文档

{
    loader: 'sass-loader',
    options: {
        // Prefer `dart-sass`
        implementation: require('sass'),
    },
},

当我运行编译时，它给我的错误。

 SassError: expected selector.
      ╷
    3 │   0%{
      │   ^
      ╵

它在我的动画文件里 我的关键帧 mixin。

@mixin keyframes($animation-name) {

  -webkit-keyframes #{$animation-name} {
    @content;
  }

  -moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

还有我的动画

@include keyframes(bounceDown) {

  0% {
    transform : translateY(0);
  }

  40% {
    transform : translateY(7px);
  }

  100% {
    transform : translateY(0);
  }

}

当我使用node-sass的时候，这段代码还能用。你知道我应该改变什么吗？

Answer 1

我想明白了！问题是我用的是'sass-loader'。

问题是我用了 -moz-keyframes 而不是 @-moz-keyframes. 这是由node-sass正确处理......但它似乎是错误的dart sass。

干杯!