何が悲しくて大晦日に仕事してるのか、原因不明（いやむしろミドルウェアのバグと思われる）の現象にどハマリして、このまま絶望とともに新年を迎えるのかと思いきや、思いつきが見事に的中して、年が変わる前に解決できたこの喜びを、ここで共有させてもらいたい。
問題：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を必要としたことくらい。
大晦日の貴重な数時間を返して欲しいが、もやもやしたまま新年を迎えなくて良かったとしよう。