After moving from node-sass to dart sass, compiler throws error in keyframes mixin

Question

I'm forced to change sass compiler in my project. I was using node-sass, now I need to change it to dart sass.

I basically done, what it says in webpack documantation

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

And when I run compilation it gives me error:

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

It is in my animations file. My keyframes mixin:

@mixin keyframes($animation-name) {

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

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

And my animation:

@include keyframes(bounceDown) {

  0% {
    transform : translateY(0);
  }

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

  100% {
    transform : translateY(0);
  }

}

When i was using node-sass this code worked. Any idea what I should change?

Answer 1

I've figured it out!

Problem was that I used -moz-keyframes instead of @-moz-keyframes. It was handled by node-sass properly.. but it seems that it is error for dart sass.

Cheers!