Language Injection in WebStorm (scss into html)

Question

The question: How to make WebStorm to understand scss in html

Description:

I'm have existed project based on vue.js

I've associate .vue with html language (.vue == .html).

In general *.vue files have structure like:

<template>
 ... 
</template>

<script>
  ...
</script>

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

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

The problem is that WebStorm didn't expect to see scss (instead of pure css) in html.

I know that "WebStorm" (as well as "IDEA") has language injection. But it's a bit challenging for me to understand how to use language injection properly.

UPD: look likes it's may be impossible for now because scss is template language (mean not injectable for a while): https://stackoverflow.com/a/29062183/930170

Answer 1

It is supported in PhpStorm/WebStorm 2016.1 -- for both LESS and SCSS.

But you have to use slightly different syntax: <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 is: rel attribute is not really allowed here. For more standards-complaint approach please watch https://youtrack.jetbrains.com/issue/WEB-20921 ticket and star/vote/comment it to get notified on any progress. UPDATE -- implemented as of 2017.1 version.

---

UPDATE 28/03/2017 for 2017.1 version of the 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>

Here how it looks in PhpStorm/WebStorm 2017.1: