Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

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

$
0
0

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。


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>