Help us understand the problem. What is going on with this article?

vueファイル内でscssを使う(シンタックスハイライトも含め)

vueでWEBサイトを作っているとき、せっかくだからSCSSで書きたくなりました。

vueテンプレート内でscssを使う

app.vue
<template>
~
</template>
<script>
~
</script>
<style lang="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
let s: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
let s: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をシンタックスハイライトありで使う場合の設定でした。

oogaki_newmedia
株式会社ニューメディアでシステムエンジニアとして働いています。 勉強の記録を残していくために始めました。 HTML/CSS/Python/JavaScript/Vue.jsなど。 よろしくお願いします。
https://www.ncv.co.jp/
newmedia
米沢・函館・新潟・福島にセンターを置くケーブルテレビ会社のシステム開発本部です。ライブ配信やテレビと連携したシステムなどを中心に開発しています。
https://www.ncv.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした