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

Question

问题：如何让WebStorm在html

中理解scss

描述：

我有基于 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 是模板语言（意味着暂时不可注入）：

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 票和 star/vote/comment 票以获取有关任何进展的通知。更新 -- 从 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 中的样子：

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

Language Injection in WebStorm (scss into html)

jetbrains-ide

intellij-idea

webstorm

vue.js