intellij-idea - WebStorm 中的语言注入(inject)(scss 到 html)

Question

问题:如何让WebStorm理解html中的scs

描述:

我有一个基于 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 中的样子: