目次
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がコンパイルされます!
コメント
コメント一覧 (2件)
[…] deep-space.blue【Vue.js】.vueファイルの中にscssを書きたい! | deep-space.bluehttps://deep-space.blue/web/695scssもvueテンプレートの中にかける 以前、webpackでbackground-imageのパスがおかしくなった話を […]
vueテンプレートの中でscssを使う場合、App.vueのstyleタグの中に変数定義をし、コンポーネントファイル(例えばHelloWorld.vue)の中で変数を使いたいのですが、その場合どのようにimportすればいいのでしょうか…