web-dev-qa-db-ja.com

Vue CLI-静的ファイルにアセットフォルダーの画像を含める

assets/ foderにある画像をいくつかの静的.scssファイルにbackground-imageとして含めることはできますか？

_buttons.scssパーシャルがあり、一部のボタンにはアイコンがあります。これをbackground-imageとして追加します。アイコンはsrc/assets/ foderにあります。

アプリの構造：

- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js

そして、_buttons.scss：

.some-selector {
    background-image: url(../assets/some_icon.svg)

    /* also tried
    background-image: url(./assets/some_icon.svg)
    background-image: url(/assets/some_icon.svg)
    background-image: url(assets/some_icon.svg)
    */
}

This relative module was not foundでエラーを返します。

コンポーネントまたはメインのApp.vueにこれらのスタイル（スコープ付きまたはスコープなし）を簡単に追加できることを知っていますが、これなしでこれを実現できるかどうか疑問に思っていましたか？

また、これらのアイコンをpublicフォルダーに追加できることも知っていますが、アイコンをassets/フォルダーに残したいです。

$ vue -V
$ 3.0.0-rc.5

たぶん、いくつかのカスタムwebpack構成ですか？

ありがとう

webpackvue.jsvuejs2vue-cli
13
Vucko

次の方法で管理できます。

background-image: url('~@/assets/some_icon.svg');

ここで重要なのは、~@をプレフィックスとして使用することです。 〜で始まるURLは、モジュール要求として扱われます。 Webpackのモジュール解決構成を活用する場合は、このプレフィックスを使用する必要があります。たとえば、vue-cli3を使用する場合に、srcフォルダーの@に等しいエイリアスを解決する場合、このタイプのURLを使用して、Webpackをassetフォルダー内の必要なアセットに強制的に解決できます。詳細はこちら： 静的アセットの処理

24
Saša Šijak