我正在使用Vue.js作为我的一个前端项目。
如您所知，Vue提供了组件的特殊语法 - each component can be declared in a single .vue file。这意味着，您可以在单个文件中定义所有相关内容，如下所示：
<tamplate>
...component template goes here...
</template>
<script>
...component code goes here...
</script>
<style>
...component style goes here...
</style>
当然，各种IDE中的vue支持还不完善。 Vue是一个相对年轻的框架，但我认为它很快就会流行起来。在Angular之后它看起来如此简单和可预测，我甚至决定在所有即将到来的前端项目中使用它，但它当然是另一个故事。
好吧，WebStorm对.vue文件一无所知，但vue看起来像html，所以你可以轻松解决这个问题 - 只需将* .vue模式添加到HTML文件类型的模式列表中（设置 - ＆gt;编辑器） - ＆gt;文件类型）。
在调整之后一切正常，直到您尝试使用非css 样式 - 由于某些原因，WebStorm无法突出显示类型为text / less的嵌入式样式等等。我尝试以不同的方式解决它：
<style type="text/css></style>
或
<style rel="stylesheet/less"></style>
......但没有任何成功。
幸运的是vue-loader（我正在使用WebPack来构建我的项目）supports another syntax of .vue files, which allows to declare template, code and style in a separate files。没关系，但我认为每个组件的单个文件更好（至少它更容易管理）。现在我被迫单独声明我的样式，因为我不能让WebStorm突出显示嵌入的LESS样式。
我尝试使用WebStorm language injections，但也没有任何成功（或者我只是错过了我的WebStorm配置中的内容）。
所以，最后一个问题是：如何在WebStorm 11中为嵌入式LESS样式启用语法高亮显示？
答案 0 :(得分：6)
在WebStorm v11 / PhpStorm v10中无法提供此类支持 - 只有CSS可用作可注射语言。
然而，下一个版本（ WebStorm v12 / PhpStorm v11 ）already supports it - 只需在rel="stylesheet/less"上使用适当的<style>（如果是LESS）属性标签
如果您想使用其他属性或值来确定您的<style>标记中要使用的语言，或者为另一个（IDE已经支持）启用此语言CSS预处理器（例如Sass / SCSS / etc） ） - 在Settings/Preferences | Editor | Language Injections创建自定义注入规则。
自2017.1版本开始，我们进行了一些其他改进/更改 - 有关详细信息，请参阅WEB-20921 : Add support for valid HTML syntax for including LESS/SCSS in <style> tags
票证。