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

Question

是否可以将assets/foder中的图像作为background-image包含在某个静态.scss文件中？

我有一个_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文件夹中所需的资产。更多信息请点击此处：处理静态资产