Vue CLI - 在静态文件中包含assets文件夹中的图像

Question

是否可以assets/在某个静态.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配置？

谢谢

Answer 1

您可以通过以下方式管理:

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

这里的关键是使用~@前缀.前缀为〜的URL被视为模块请求.如果要利用Webpack的模块解析配置,则需要使用此前缀.例如,如果您使用src文件夹的解析别名(@如果使用vue-cli3),则可以使用此类型的URL强制Webpack解析为assets文件夹中所需的资源.更多信息: 处理静态资产