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

我有一个_buttons.scss部分和一些按钮有一个图标,我想添加为background-image.图标位于src/assets/ foder中.

应用程序 struct :

- 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文件夹中添加这些图标,但我希望图标保留在assets/文件夹中.

$ vue -V
$ 3.0.0-rc.5

也许是一些定制的网页配置?

谢谢

推荐答案

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

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

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

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

Vue CDN的html工作,但v—如果不工作

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

如何在 vue2.7 中删除 slot-scope

为什么我在 Vue npm run serve 的 localhost 中得到无法获取

在 Vue 项目之间共享assets和组件

一个 div 组件中的 Vue.js 2.0 路由链接

vuejs中watch方法和计算方法有什么区别

如何使用 vue-resource 添加额外的标头来发布请求?

Vue更改宽度和内容

为什么 v-model 不适用于数组和 v-for 循环?

使用 refs 聚焦元素目标

中文而不是英文的Element UI分页

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

过渡后的 v-if 下方的过渡元素

来自 Vue.js 的 ESLint 插件的消息中的LHS是什么意思?

Vuetify - 如何进行分页?

Vuetify 过渡:如何设置过渡速度

Vue组件如何命名

vue-router 如何使用 hash 推送({name:"question"})?