Nuxt.jsでurl('@/assets/xxx.png')がエラーになる時の解決策

nuxt 2.13.0で確認。

背景画像を設定したい時など、以下のように書くことがある。

<style>.test-class{background-image:url('@/assets/xxx.png');}</style>

しかし、これでは以下のようなエラーが出てしまう。

Module not found: Error: Can't resolve './@/assets/xxx.png' in ...

見ての通り、./が追加されて相対パスとみなされてしまっている。

正しくは以下のように書く。

<style>.test-class{background-image:url('~assets/xxx.png');}</style>

参考：アセット - NuxtJS

Warning: Nuxt 2.0 からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし）か、@ のエイリアスを使わなければなりません。 例：background: url("~assets/banner.svg")

ただし、@assets/xxx.pngも@/assets/xxx.pngも~/assets/xxx.pngも試した限りはNG。