vue-cli中less文件内图片引入问题

在lees文件中直接拼接地址 background-image: url("../../components/header/@{url}@2x.png");

当在其他文件中引入less文件时，会以less文件所在位置为基准去寻找图片文件；

而以 background-image: ~"url(@{url}@2x.png)"; 指定图片位置，

会以引入less的其他文件位置为基准去寻找指定图片。

.bg-image(@url) {
  // background-image: url("../../components/header/@{url}@2x.png");
  background-image: ~"url(@{url}@2x.png)";
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
    background-image: ~"url(@{url}@3x.png)";
  }
}

转载于:https://my.oschina.net/selinp/blog/1541069