Vetur: Autocomplete less/SCSS variables in .vue files for cases with @import

[nicothin]

• [x] I have searched through existing issues

Feature Request

I am forced to use @import in the styles block. It would be nice to have auto-completion for variable names.

<template>
  <!-- some code -->
</template>

<script lang="ts">
  // some code
</script>

<style lang="less" scoped>
  @import '@/styles/variables.less'; // File with variables for autocomplete (Including @padding-lg)
  // or @import '../styles/variables.less'; 

  .selectorr {
    padding: @padding-lg; // It would be great to have autocomplete here when you type @
  }
</style>

[Smekalin]

I have the same problem. Even if I write relative path through '../../' I cannot use auto-competion for variables.
If I write separated '.less' file I can use autocomplete. This problem only in SFC

[yoyo930021]

You can use this extension.
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss

It is support Vue SFC now.

[yoyo930021]

In addition,
this feature is also not support in VSCode.
https://github.com/microsoft/vscode/issues/6734

[octref]

As mentioned, you can use the extension for now. I don't have time to reimplement it for Vetur.

[nicothin]

I use less but the suggested extension for Sass.
There is no time - this is an absolute reason.

[octref]

You can open an issue for https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-less to impelment Vue support.