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

【问题标题】：After moving from node-sass to dart sass, compiler throws error in keyframes mixin从 node-sass 移动到 dart sass 后，编译器在关键帧 mixin 中抛出错误
【发布时间】：2020-08-15 18:10:37
【问题描述】：

我不得不在我的项目中更改 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 时，此代码有效。知道我应该改变什么吗？

【问题讨论】：

标签： css webpack sass node-sass

【解决方案1】：

我想通了！

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

干杯！

【讨论】：