用作关键帧步骤百分比的变量上的 WebPack SCSS 错误“未知单词”

Webpack（版本 4.0.0）抛出的错误：

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 |   }  

相关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...    
}

我使用的语法来自这个答案 https://stackoverflow.com/a/31084393/870729.

我尝试了几种语法变体，但没有成功：

// throws "expect ':' after $pulse-percent in assignment statement
$pulse-percent { 

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

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

我发现的 Google 上的其他资源似乎无法解决这种情况，并且/或者似乎已经过时了。

其他变量正在正确处理。

我尝试使用的任何“插值”语法都会失败。我的 SCSS 中失败的另一行是animation: #{$pulse-interval} pulseBG 1s linear infinite;

是的，在严肃的 Web 应用程序中，这是一个愚蠢的 CSS 动画。
是的，我只需输入值即可解决该问题。
但是，我想了解这个问题以及如何解决它。

这是 Webpack 4.0.0 版本上的一个错误，自 Webpack 4.1.1 版本以来此问题已解决。