Question

是否可以在assets/静态文件中包含.scss图像中的图像作为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。

我知道我可以在我的组件或主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解析到资产文件夹中的所需资产。更多信息在这里： handling static assets

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

1 个答案: