WebStorm 中的语言注入（scss 到 html）

Question

问题：如何让WebStorm理解scss中的html

说明：

我已经存在基于vue.js的项目

我已将.vue 与html 语言相关联（.vue == .html）。

一般*.vue 文件的结构如下：

<template>
 ... 
</template>

<script>
  ...
</script>

    <style lang="scss">
      $some_var: 10px;

      .parent_class {
        .child_class {
          padding: $some_var;
        }
       }
    </style>

问题在于 WebStorm 没想到会在 html 中看到 scss（而不是纯 css）。

我知道“WebStorm”（以及“IDEA”）有language injection。 但是要理解如何正确使用语言注入对我来说有点挑战。

UPD： 看起来现在可能不可能，因为scss 是模板语言（意味着暂时不可注入）：https://stackoverflow.com/a/29062183/930170

Answer 1

在 PhpStorm/WebStorm 2016.1 中是 supported -- LESS 和 SCSS。

但你必须使用稍微不同的语法：<style rel="stylesheet/scss" type="text/css">

<style rel="stylesheet/scss" type="text/css">
  $some_var: 10px;

  .parent_class {
    .child_class {
      padding: $some_var;
    }
   }
</style>    

---

细微差别是：rel 属性在这里实际上是不允许的。有关更多标准投诉方法，请观看https://youtrack.jetbrains.com/issue/WEB-20921 票并加星/投票/评论它以获得任何进展的通知。 更新 -- 从 2017.1 版本开始实施。

---

2017 年 3 月 28 日更新适用于 IDE 的 2017.1 版本

<style type="text/scss">
  $some_var: 10px;

  .parent_class {
    .child_class {
      padding: $some_var;
    }
   }
</style>

<style type="text/stylus">
  body
    font: 12px Helvetica, Arial, sans-serif

  a.button
    -webkit-border-radius: 5px
    -moz-border-radius: 5px
    border-radius: 5px
</style>

PhpStorm/WebStorm 2017.1 中的外观如下：