I am using Visual Studio 2015 and vue.js to implement frontend for my web app.
As it known, vue.js comes with quite special approach to declare components - each component should be declared in a single .vue file, that contains all required code (template, script and style) and looks like this:
<template>
<!-- Component template goes here. -->
</template>
<script>
<!-- Component code goes here. -->
</script>
<style>
<!-- Component style goes here. -->
</style>
There is no official support for .vue files in MSVS at the moment, so I just use HTML editor to edit that files and it works fine for me.
So, back to the problem...
Vue-files allows you to set required language for script or style (just add lang attribute to script or style tags and here you go). So, as I am using less, my style tag looks like this:
<style lang="less">...</style>
Visual Studio, of course, know nothing about special lang attribute, so I add some well-known attributes in order to enable less syntax highlighting and now style tag looks like this:
<style lang="less" rel="stylesheet/less" type="text/less">...</style>
Unfortunately Visual Studio don't understand my intention to use less and highlight my less code like simple css :-(
So, my question is: how to let Visual Studio understand .less styles, that embedded right into html document?
P.S. It is allowed to reference separate files for any part of .vue component like this...
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
...but I really want to store everything inside single file.
And, of course, I want to use single IDE for both frontend and backend, so advice like "just use Visual Studio Code, SublimeText or WebStorm" is not very useful.
