url is resolved in a wrong way

[Huai-Kang]

I was using vue-cli to build a project, and use less to write styles;
when I try to import a .less file into .vue to use a utils function, it was return a bad result;
below is my utils.less:

.background(@url) {
  background-image: url('@{url}@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url('@{url}@3x.png');
  }
}

and this is styles in my header.vue, it was import utils.less:

<style lang="less">
  @import '../../common/css/utils';
  .brand {
     width: 64px;
     height: 64px;
     margin-right: 16px;
     border-radius: 4px;
     vertical-align: bottom;
     .background('./brand');
   }
</style>

webpack:

[ 
  'vue-style-loader',
  {
    loader: 'css-loader',
    options: { minimize: false, sourceMap: false }
  },
  {
    loader: 'less-loader',
    options: { sourceMap: false }
  }
]

I think the url will be just simply merge, like './[email protected]' and './[email protected];
but in fact, I got '../../common/css/[email protected]' and '../../common/css/[email protected]';
it looks like merge the url of import file;
I don't know how to deal with the problem, can somebody help me?

below is the error message:

ERROR  Failed to compile with 2 errors                                                                                                          4:18:06 PM

These relative modules were not found:

* ../../common/css/brand@2x.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vueloader/lib/style-compiler?{"vue":true,"id":"data-v-bc573e70","scoped":false,"hasInlineConfig":false}!./~/less-loader/dist/cjs.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header/Header.vue
* ../../common/css/brand@3x.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-bc573e70","scoped":false,"hasInlineConfig":false}!./~/less-loader/dist/cjs.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header/Header.vue

[rjgotten]

Path resolution occurs at the place where the url() function is used. If that is inside a mixin declared in another imported .less sheet, then the path will be made relative to that imported sheet and not relative to where said mixin is called.

This relates also to earlier discussion in #2629 as the data-uri() function has the same behavior.
No final solution to this problem was designed yet, though I did take a shot at it back then.

[Huai-Kang]

@rjgotten I had resolved this problem with #2598

[matthew-dean]

@Feel-Joy Is this closable then?