blog 让 WebStorm 支持高亮 <style> 标签内的 SCSS/Sass 语法

WebStorm 很早就支持了 *.scss 或 *.less 文件的语法高亮，但偶尔我们会需要在 HTML 文件的 <style> 标签内写 SCSS 或 Less 的语法（例如使用 Vue.js 的朋友应该会需要在 *.vue 文件的 <style> 标签内写 SCSS），其实 WebStorm 也是支持的，但是官方文档上好像并没有提及。

WebStorm 2019.1 及之后的版本

在 <style> 上加 lang="scss"、lang="sass" 和 lang="less" 就可以分别支持 SCSS、Sass 和 Less 的语法了。

WebStorm 2017.1 及之后的版本

在升级到 WebStorm 2017.1 之后，我发现 2016.3 及以前版本的方法已经不起作用了。谷歌了半天也没有找到类似问题，于是尝试了各种方法，还真被我试出来了 😂

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

举例来说：

<!-- 下面的 style 块内支持 SCSS 的语法 -->
<style type="text/scss">
body {
  $height: 10px;
  div {
    height: $height;
  }
}
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style type="text/sass">
body
  $height: 10px
  div
    height: $height
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style type="text/less">
body {
  @height: 10px;
  div {
    height: @height;
  }
}
</style>

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">
body {
  $height: 10px;
  div {
    height: $height;
  }
}
</style>

<!-- 下面的 style 块内支持 Sass 的语法 -->
<style rel="stylesheet/sass">
body
  $height: 10px
  div
    height: $height
</style>

<!-- 下面的 style 块内支持 Less 的语法 -->
<style rel="stylesheet/less">
body {
  @height: 10px;
  div {
    height: @height;
  }
}
</style>

Mar 27 '17 03:03 lmk123

试下在 webpack.config.js 配置 vue-loader，这里是官方文档，是微信群里大家告我的方法。

<style lang="scss"></style>

{
  test: /\.vue$/,
  use: [{
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
      }
    }
  }]
}