从 node-sass 移动到 dart sass 后，编译器在关键帧混合中抛出错误

Question

我不得不在我的项目中更改 sass 编译器。我正在使用 node-sass，现在我需要将其更改为 dart sass.

我基本上做到了，webpack documantation

里面说的

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

当我 运行 编译时它给我错误：

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

它在我的动画文件中。我的关键帧混合：

@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

我想通了！

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

的错误

干杯！