用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的情况。