Laravel Mix + SASS/SCSS + curly braces (波括弧/中括弧) でハマった

何が悲しくて大晦日に仕事してるのか、原因不明（いやむしろミドルウェアのバグと思われる）の現象にどハマリして、このまま絶望とともに新年を迎えるのかと思いきや、思いつきが見事に的中して、年が変わる前に解決できたこの喜びを、ここで共有させてもらいたい。

問題：SCSSの文字列内の}が外に出て解釈されてしまう

問題のSCSSコードがこれ

background-image: url("... fill='${BencodeURIComponent($iconColor)}' ...");

Webpackでコンパイルしていたときはurl()に渡してる文字列は、意図したとおりそのままCSSに吐き出されていたが、Laravel Mixにした途端、どうしても}が解釈されてしまって下記のような壊れたCSSになってしまう。

background-image: url("... fill='${BencodeURIComponent($iconColor)

}
...");

クオートをシングルとダブルを切り替えてみたり、バックスラッシュ\でエスケープしてみたり・・・どれもダメだった。
が、渡している先がurl()と言うことは、もしや・・・

解決策：URLエンコードする

}を%7Dに置き換える。はい、それだけ。
ついでに{も%7Bに置き換えた。

これでやっと、正常なCSSが吐き出され、意図したとおりに動いてくれました。

あとがき

Laravel MixはWebpackのラッパーなので切り替える前と同じはずなのに、なぜか起きたこの現象。切り替え前と違うことと言えば、Laravel MixはSCSSをコンパイルするためにresolve-url-loaderを必要としたことくらい。

大晦日の貴重な数時間を返して欲しいが、もやもやしたまま新年を迎えなくて良かったとしよう。