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

nuxt 2.13.0で確認。

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

index.vue（抜粋）

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

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

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

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

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

index.vue（抜粋）

<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。