intellij-idea - WebStorm 中的语言注入(inject)(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”)具有语言注入(inject)。 但理解如何正确使用语言注入(inject)对我来说有点挑战。

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

Answer 1

是supported在 PhpStorm/WebStorm 2016.1 中——适用于 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 日，适用于 2017.1 版本的 IDE

<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 中的外观: