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.