WebStorm中的语言注入(scss into html)

时间:2016-03-31 09:24:48

标签: intellij-idea webstorm vue.js jetbrains-ide

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

说明

我已经存在基于vue.js

的项目

我将.vuehtml语言关联起来(.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

1 个答案:

答案 0 :(得分:4)

对于LESS和SCSS,它在PhpStorm / WebStorm 2016.1中是supported

但是你必须使用稍微不同的语法:<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>    

Nuance是:此处不允许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中的内容:

enter image description here