Q:

WebPack SCSS error "uknown word" on variable used as keyframe step percentage

The error Webpack (version 4.0.0) throws:  
ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: Unknown word (740:5)

  738 |   }
  739 | 
> 740 |   #{$pulse-percent} {
      |     ^
  741 |     background-position: $mask-right-end 0;
  742 |   }  

The relevant SCSS:      
// simplified for this question...
$pulse-percent: .6 / 5 * 100%;

@keyframes pulseBG {
  // other steps...

  // ERROR on this line
  #{$pulse-percent} {
    background-position: $mask-right-end 0;
  }

  // other steps...    
}

The syntax I'm using is from this answer.  
I've tried a several syntax variations with no luck:
// throws "expect ':' after $pulse-percent in assignment statement
$pulse-percent { 

// throws "unknown word"
{$pulse-percent} {

// throws "unknown word"
#{( $variable1 / $variable2 * 100% )} {

Other resources on Google that I have found don't seem to address this scenario, and / or seem outdated.
Other variables are being processed properly.
Any "interpolation" syntax I try to use fails.  Another line in my SCSS that fails is animation: #{$pulse-interval} pulseBG 1s linear infinite;
Yes, it's a silly CSS animation in a serious web application.
Yes, I could just enter the values to work around the problem.
But, I'd like to understand the problem and how to resolve it.

A:

This was a bug on version 4.0.0 of Webpack, This issue is resolved since version 4.1.1 of Webpack.

