問題描述
在 sublime 中編寫 .vue 代碼時, style 標簽添加 lang="scss"屬性后, 其中的 scss 代碼不高亮顯示, 如圖
scss 語法不高亮
問題分析
- sublime 已安裝 Vue Syntax Highlight 和 Syntax Highlighting for Sass插件;
- 嘗試在 .scss 文件中查看代碼, 可以高亮顯示;
- 在 .vue 的 style 標簽中, 把 lang 屬性的值改為 less 或 sass, 都有高亮標記;
- 網(wǎng)上搜相關(guān)問題 https://github.com/vuejs/vue-syntax-highlight/issues/52, 這里是 scss 語法也被當作 sass 顯示, 于是把 vue 語法文件中的 sass 部分刪了. 與我的情況不太相同. 但是提供思路可以查看 vue 的語言文件 vue.tmLanguage 來排查問題.
- 判斷是 vue 與 scss 語法沒匹配上, 但是與 sass 匹配上了, 于是打開 vue / sass / scss 語法文件, 比較他們的不同點
問題解決
出現(xiàn)原因
vue.tmLanguage 文件中, 有如下代碼
<dict>
<key>include</key>
<string>source.css.scss</string>
</dict>
而 scss.sublime-syntax 文件中,
scope: source.scss
解決方法
把 vue.tmLanguage 文件中的相關(guān)位置改為
<string>source.scss</string>
改完后, 在 .vue 文件中即可顯示 scss 的語法高亮了.
副作用檢討
嘗試在 .scss 文件中查看語法高亮, 可以正常顯示
