vueでWEBサイトを作っているとき、せっかくだからSCSSで書きたくなりました。
vueテンプレート内でscssを使う
app.vue
<template>
~
</template><script>~</script><stylelang="scss"></style>と、lang="scss"をつけてやる。
あと、sass-loaderとnode-sassをインストールしてやるだけでした。
npm install node-sass --save
npm install sass-loader --save
Vimのシンタックスハイライトを設定
自分vimのposva/vim-vueプラグインを入れているのですが、デフォルトのCSSだとちゃんときくのに、lang設定をしたとたん、シンタックスハイライトがきかなくなってしまいました。
こちらを参考に直しました。
https://github.com/posva/vim-vue/issues/68
vi ~/.vim/bundle/vim-vue/syntax/vue.vim
※プラグインが入っているディレクトリを探してください
vue.vim
lets:languages=[ \{'name':'less','tag':'style'}, \{'name':'pug','tag':'template','attr_pattern':s:attr('lang','\%(pug\|jade\)')}, \{'name':'slm','tag':'template'}, \{'name':'handlebars','tag':'template'}, \{'name':'haml','tag':'template'}, \{'name':'typescript','tag':'script','attr_pattern':'\%(lang=\("\|''\)[^\1]*\(ts\|typescript\)[^\1]*\1\|ts\)'}, \{'name':'coffee','tag':'script'}, \{'name':'stylus','tag':'style'}, \{'name':'sass','tag':'style'}, \{'name':'scss','tag':'style'}, \]一番上の行にあるlessというのを、一番下に移動します。
vue.vim
lets:languages=[ \{'name':'pug','tag':'template','attr_pattern':s:attr('lang','\%(pug\|jade\)')}, \{'name':'slm','tag':'template'}, \{'name':'handlebars','tag':'template'}, \{'name':'haml','tag':'template'}, \{'name':'typescript','tag':'script','attr_pattern':'\%(lang=\("\|''\)[^\1]*\(ts\|typescript\)[^\1]*\1\|ts\)'}, \{'name':'coffee','tag':'script'}, \{'name':'stylus','tag':'style'}, \{'name':'sass','tag':'style'}, \{'name':'scss','tag':'style'}, \{'name':'less','tag':'style'}, \]自分の場合はこれで直りました。
ただ、先ほど書いたページだと、逆にlessを一番上に持っていくことで直ったとも書いてあるので、どちらも試してみてください。
以上、vueファイル内でscssをシンタックスハイライトありで使う場合の設定でした。