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

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

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

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

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

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

実はこれを

<style>

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

<style lang="scss">

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

ということで早速！！

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

……エラーが出ました。

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

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

npm install sass-loader node-sass --save-dev

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