Sprache Injection in WebStorm (SCSS in html)

Question

Die Frage: Wie WebStorm verständlich machen scss in html

Beschreibung:

Ich Projekt existiert haben basierend auf vue.js

Ich assoziiere .vue mit html Sprache (.vue == .html).

Im Allgemeinen *.vue Dateien Struktur wie:

<template> 
... 
</template> 

<script> 
    ... 
</script> 

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

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

Das Problem ist, dass WebStorm nicht erwarten, scss (anstelle von reinen css) in html zu sehen.

Ich weiß, dass "WebStorm" (sowie "IDEA") language injection hat. Aber es ist ein bisschen schwierig für mich zu verstehen, wie man Sprachinjektion richtig verwendet.

UPD: Blick mag es jetzt möglicherweise unmöglich ist, weil scss Template-Sprache (Mittelwert nicht injizierbare für eine Weile) ist: https://stackoverflow.com/a/29062183/930170

Answer 1

Es ist supported in PhpStorm/WebStorm 2.016,1 - für beide weniger und SCSS .

Aber Sie müssen etwas andere Syntax verwenden: <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 ist: rel Attribut ist nicht wirklich hier erlaubt. Für weitere Standards-Beschwerde-Ansatz beobachten Sie bitte https://youtrack.jetbrains.com/issue/WEB-20921 Ticket und Stern/Stimme/Kommentar es auf jeden Fortschritt benachrichtigt werden. UPDATE - implementiert ab Version 2017.1.

---

UPDATE 28/03/2017 für 2017,1 Version der 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> 

Hier ist, wie es aussieht, ist in PhpStorm/WebStorm 2017,1: