Vue CLI-включить изображение из папки assets в статический файл

можно ли включить изображение, которое находится в assets/ фодер, в какой-то статике , как background-image?

у меня есть _buttons.scss частичные и некоторые кнопки имеют значок, который я хотел бы добавить как background-image. Значки расположены в src/assets/ фодэр.

приложение структуру:

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

Я знаю, что могу просто добавить эти стили (область или нет) в мой компонент или в главном приложении.vue, однако, мне было интересно, может ли это быть достигнуто без этого?

Я знаю также, что я могу добавить эти иконки в моем public папка, но я хотел бы, чтобы значки оставались в .

$ vue -V
$ 3.0.0-rc.5

может быть, некоторые пользовательские конфигурации webpack?

спасибо

6
vue-cli vue.js vuejs2 webpack

1 ответов

Вы можете управлять, что : 

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

ключ здесь использует ~@ как preffix. URL-адреса с префиксом ~ рассматриваются как запрос модуля. Вам нужно использовать этот префикс, если вы хотите использовать конфигурации разрешения модуля Webpack. Например, если у вас есть псевдоним разрешения для папки src, равный@, что вы делаете при использовании vue-cli3, вы можете использовать этот тип URL, чтобы заставить Webpack разрешить необходимый актив в папке assets. Подробнее здесь : обработка статических активы

4