Nuxt.jsにPugを導入する！yarn, npmでモジュールをインストール！
野田竣介
フェルメール株式会社
Nuxt.jsにSassを導入する！yarn, npmでモジュールをインストール！
野田竣介
今回はこのような質問をいただきました。
Nuxt.jsでSassを使いたい！
最近ではCSSを直接書くことが少なく、SassやScssを利用することが多くなってきましたよね。
Sassを導入するとコード量が少なくなり、保守性も高くなります。
そこで今回はこちらの質問について解説していきます！
環境
- nuxt：2.15.4
- composition-api：0.23.3
Contents
Sassを導入してみる！
Sassを利用できる環境にするには以下のモジュールを追加するだけです。
- sass
yarnで導入
$ yarn add --dev sassnpmで導入
$ npm install --dev sass動作確認！
私は以下のようなファイルを作成して動作確認しました。
<template lang="pug">
div
h1.page-title.
ページタイトル
p(v-if="isActive").
ページ本文テキスト
</template>
<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'
export default defineComponent({
setup (_props) {
const isActive = ref(true)
return {
isActive
}
}
})
</script>
<style lang="sass">
.page-title
color: red
</style>
styleタグのlangにsassを指定します。
正常に表示できたら導入完了です！
あわせて読みたい
Nuxt.jsにPugを導入する！yarn, npmでモジュールをインストール！
あとがき
Pugと同様、簡単に導入することができました。
NuxtではPugとSassを積極的に利用していきたいですね！
