VUE3中SCSS引入背景图片的方式

在VUE3的组件中写样式时当需要用到css的背景图片，这时背景图片怎么引入呢？一般有两种方式：
一、相对路径引：

background: url("./../assets/img/test.png") no-repeat;

二、绝对路径

background: url("~@/assets/img/test.png") no-repeat;

和在vue的模板中使用还是有一些区别的，在vue模板中可以用：

 

<img :src="require('@/assets/img/test.png')" />

<img src="@/assets/img/logo.svg" />

SCSS中引入图片前面需要多加一个~号

为什么要加一~呢？

以~符号作为前缀主要是因为vue-cli默认配置的publicPath为/src，别名为@，而在scss中@是变量定义的前缀，所以需要加上~以示区分

这个小知识明白了吧，如果有帮助请帮点个赞，谢谢！