web-dev-qa-db-fra.com

Vue CLI - inclure l'image du dossier des ressources dans le fichier statique

Est-il possible d'inclure une image, qui est dans assets/ foder, dans certains _ .scss fichier, en tant que background-image?

J'ai un _buttons.scss partiel et certains boutons ont une icône, que j'aimerais ajouter comme background-image. Les icônes sont situées dans src/assets/ foder.

Structure de l'application:

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

Et en _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)
    */
}

Ce qui renvoie une erreur avec This relative module was not found.

Je sais que je peux simplement ajouter ces styles (délimités ou non) dans mon composant ou dans App.vue principale, cependant, je me demandais si cela pouvait être réalisé sans cela?

Je sais aussi que je peux ajouter ces icônes dans mon dossier public mais je voudrais que les icônes restent dans le assets/ dossier.

$ vue -V
$ 3.0.0-rc.5

Peut-être une configuration Webpack personnalisée?

Merci

webpackvue.jsvuejs2vue-cli
13
Vucko

Vous pouvez gérer cela en:

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

La clé ici utilise ~@ comme préfixe. Les URL préfixées par ~ sont traitées comme une demande de module. Vous devez utiliser ce préfixe si vous souhaitez tirer parti des configurations de résolution de module de Webpack. Par exemple, si vous disposez d'un alias de résolution pour le dossier src égal à @, ce que vous faites si vous utilisez vue-cli3, vous pouvez utiliser ce type d'URL pour forcer Webpack à se résoudre à l'actif requis dans le dossier d'actifs. Plus d'informations ici: gestion des actifs statiques

24
Saša Šijak