こんばんは！ヒカリです。
Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。
今回はこのような質問をいただきました。
Nuxt.jsでSassを使いたい！
最近ではCSSを直接書くことが少なく、SassやScssを利用することが多くなってきましたよね。
Sassを導入するとコード量が少なくなり、保守性も高くなります。
そこで今回はこちらの質問について解説していきます！
環境
- nuxt：2.15.4
- composition-api：0.23.3
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を指定します。
正常に表示できたら導入完了です！
あとがき
Pugと同様、簡単に導入することができました。
NuxtではPugとSassを積極的に利用していきたいですね！
