vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...

用vue-cli3脚手架新建的项目，在使用less设置背景图片的时候遇到了路径报错问题，该如何正确设置背景图片的路径？

项目目录如下：

现在在css文件中有一个全局样式common.less。使用的是images的一张图片icon.png。

common.less是通过vue.config.js里面全局这样引用的，如下代码：

pluginOptions: {

'style-resources-loader': {

preProcessor: 'less',

patterns: [path.resolve(__dirname, './src/assets/css/common.less')]

}

因为views中有一些.vue页面通用的样式，是写在common.less里的。所以现在想知道在common.less中该如何引用icon.png这张图片?

background: url(??????????/icon.png);

如果是直接写在.vue里的style样式，下面这样设置是没有问题的

background: url(../assets/images/icon.png);

或者data中通过require引入也是可以的。同样在通用的common.css如下使用也是没有问题的。

background: url(../../assets/images/icon.png);

但现在是common.less文件。那请问一下该如何引用？

不考虑使用cdn等绝对路径的情况或者不用less的情况。

vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...相关推荐

C语言试题三十一之判断字符串是否为回文?若是则函数返回1，主函数中输出yes，否则返回0，主函数中输出no。回文是指顺读和倒读都是一样的字符串。
1. 题目请编写函数function,该函数的功能是:判断字符串是否为回文?若是则函数返回1,主函数中输出yes,否则返回0,主函数中输出no.回文是指顺读和倒读都是一样的字符串. 2 .温馨提示 ...
从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小
只需要在css样式里对BODY元素添加css样式即可 html代码如下 <STYLE TYPE="text/css"> BODY {background-image: ...
vue怎么vw布局好用_vue cli3项目的pc自适应布局_vw
前言 vw布局的页面是等比改变的,比如我们在一个750px的屏幕宽度中使用了vw,当我们把屏幕宽度改为1920的时候,网页的整个样式包括字体都会等比放大.vw布局我用于大屏监控数据展示. 下图是750 ...
vue 取数组第一个值_Vue如何循环提取对象数组中的值
1.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res) = ...
vue 获取当前发布的版本_Vue 3.0重磅发布！
来源:OSC开源社区(ID:oschina2013) Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能.更小的捆绑包体积.更好的 Typ ...
如何给html文件加背景图片,怎么在文件夹中设置背景图片
在文件夹中设置美丽的背景图片,可以让你的电脑显得与众不同,下面是学习啦小编给大家整理的一些有关在文件夹中设置背景图片的方法,希望对大家有帮助! 在文件夹中设置背景图片的方法打开你要设置背景的文件夹, ...
java给frame设置背景_JAVA设置FRAME背景总结设置背景图片
Java中有关Frame背景的设置总结我们在进行图形用户界面编程时,为了做出一个漂亮.个性化的界面,那么界面的背景就必须考虑了.要想灵活使用背景,就一定要对frame的基本有一些了解,因为在java ...
axure中怎么把图片变圆_Axure 给Image部件设置本地图片
目的:通过任意选择本地图片,给Image设置图片,显示在image部件上. 效果: 实现步骤: Step1:先设置需要的部件 (1)拖入text field部件,命名为:选择图片,设置类型为file ...
android thumb大小,Android 设置thumb图片大小
xml: android:thumb="@drawable/seekbar_thumb" seekbar_thumb.xml: 修改为: private int seekWidth ...

vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...

vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...相关推荐

最新文章

热门文章