用作关键帧步长百分比的变量上的 WebPack SCSS 错误 "uknown word"

Question

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

我使用的语法来自 this answer .

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

// 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;

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

Answer 1

这是 Webpack 4.0.0 版本的一个错误，这个问题从 Webpack 4.1.1 版本开始解决。