【Vue.js】.vueファイルの中にscssを書きたい!

scssもvueテンプレートの中にかける

以前、webpackでbackground-imageのパスがおかしくなった話を書きましたが、そもそもこの時はscssを.vueファイルとは別のところで書いて読み込ませていました。

しかし、vue-cliで立ち上げた最初に入っているApp.vueをよくみれば

styleらしい子がいるじゃないですか。

実はこれを

こうするだけで、そのままここでscss記法できます。※sassもできます。

.vueファイルの中でscssを使うなら、sass-loaderもnpm installしよう

ということで早速!!

Module not found: Error: Can’t resolve ‘sass-loader’

……エラーが出ました。

どうやら、sass-loaderが入っていないようです。

vueのプロジェクトの入っているところに、node-sassとsass-loaderを入れてあげましょう。

これで、.vueの中のscssがコンパイルされます!