问题:如何让WebStorm理解scss
中的html
说明
我已经存在基于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”)有language injection
。
但是,理解如何正确使用语言注入对我来说有点挑战。
UPD:看起来好像现在可能不可能,因为scss
是模板语言(意味着暂时无法注入):https://stackoverflow.com/a/29062183/930170
答案 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中的内容: