sublime 中 .vue文件里scss高亮问题

问题描述

在 sublime 中编写 .vue 代码时, style 标签添加 lang="scss"属性后, 其中的 scss 代码不高亮显示, 如图

scss 语法不高亮

问题分析

1. sublime 已安装 Vue Syntax Highlight 和 Syntax Highlighting for Sass插件;
2. 尝试在 .scss 文件中查看代码, 可以高亮显示;
3. 在 .vue 的 style 标签中, 把 lang 属性的值改为 less 或 sass, 都有高亮标记;
4. 网上搜相关问题 https://github.com/vuejs/vue-syntax-highlight/issues/52, 这里是 scss 语法也被当作 sass 显示, 于是把 vue 语法文件中的 sass 部分删了. 与我的情况不太相同. 但是提供思路可以查看 vue 的语言文件 vue.tmLanguage 来排查问题.
5. 判断是 vue 与 scss 语法没匹配上, 但是与 sass 匹配上了, 于是打开 vue / sass / scss 语法文件, 比较他们的不同点

问题解决

出现原因

vue.tmLanguage 文件中, 有如下代码

<dict>
<key>include</key>
  <string>source.css.scss</string>
</dict>

而 scss.sublime-syntax 文件中,

scope: source.scss

解决方法

把 vue.tmLanguage 文件中的相关位置改为

  <string>source.scss</string>

改完后, 在 .vue 文件中即可显示 scss 的语法高亮了.

副作用检讨

尝试在 .scss 文件中查看语法高亮, 可以正常显示