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

Question

是否可以在某个静态的.scss文件中包含一个位于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。

我知道可以在组件中或主要的 App.vue 文件中添加这些样式（作用域或非作用域），但是我想知道是否可以不需要这样做来实现？

我也知道可以将这些图标添加到我的public文件夹中，但我希望这些图标仍然保存在assets/文件夹中。

$ vue -V
$ 3.0.0-rc.5

也许需要定制webpack配置？

谢谢

- Vucko

---

我认为这个答案可以解决你的问题 解决Webpack中CSS文件中background-image URL的问题。 - Max Sinev

你是如何使用 main.scss 文件的？我在 main.js 文件中导入它，相对导入对我有效。 - Luis Orduz

@LuisOrduz 我在我的 App.vue 文件中有 @import 'main.scss'。将 .scss 文件导入到 main.js 中是一个好的做法吗？ - Vucko

@Vucko 从 App.vue 导入 main.scss 完全没有问题。除非我尝试使用不存在的 URL 来设置 background-image，否则我无法重现错误。另外请注意，../assets/some_icon.svg 是正确的路径。你有一个仓库可以让我查看吗？ - tony19

我很高兴它对你有用，但我并没有真正建议任何东西。我只是陈述了我按照你描述的方式尝试了你的代码，而我无法重现这个问题 :) 你可以从 main.js 或 App.vue 导入 main.scss，但我个人更喜欢从 *.vue 文件中导入 CSS，只在 main.js 中设置应用程序代码。 - tony19

Answer 1

您可以通过以下方式进行管理：

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

关键在于使用 ~@ 作为前缀。以 ~ 开头的 URL 将被视为模块请求。如果想要利用 Webpack 的模块解析配置，您需要使用这个前缀。例如，如果您将 resolve 别名设置为 @，并且您正在使用 vue-cli3，则可以使用这种类型的 URL 强制 Webpack 解析到 assets 文件夹中所需的资源。更多信息请查看：处理静态资源

- Saša Šijak