让 WebStorm 支持 style 标签内的 SCSS/SASS 语法

WebStorm 很早就支持了 *.scss 或 *.less 文件的语法，但偶尔我们会需要在 HTML 文件的 <style>标签内写 SCSS 或 Less 的语法（例如使用 Vue.js 的朋友应该会需要在 *.vue 文件的 <style> 标签内写 SCSS），但是可能老是报错。

 

WebStorm 2016.3 及以前的版本

在 WebStorm 2016.3 及以前的版本，需要在 <style> 标签上加上 rel="stylesheet/scss"，这样 WebStorm 就能正常解析 SCSS 的语法了。如果你使用的是 Sass 的语法，则加上 rel="stylesheet/sass"（只有一个字母不相同）。Less 则是加上 rel="stylesheet/less"。

举例来说：

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style rel="stylesheet/scss">
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style rel="stylesheet/sass">
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style rel="stylesheet/less">
</style>

WebStorm 2017.1 及之后的版本

在升级到 WebStorm 2017.1 之后，我发现上面的方法已经不起作用了。

WebStorm 2017.1 及之后的版本需要使用 type="text/scss" 或 type="text/sass" 来支持 SCSS 或 Sass 语法，使用 type="text/less" 来支持 Less 语法。

举例来说：

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style type="text/scss">
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style type="text/sass">
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style type="text/less">
</style>