初心者向け

Nuxt.jsにSassを導入する!yarn, npmでモジュールをインストール!

nuxt-sass

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

今回はこのような質問をいただきました。

Nuxt.jsでSassを使いたい!

最近ではCSSを直接書くことが少なく、SassやScssを利用することが多くなってきましたよね。

Sassを導入するとコード量が少なくなり、保守性も高くなります。

そこで今回はこちらの質問について解説していきます!

環境
  • nuxt:2.15.4
  • composition-api:0.23.3

Sassを導入してみる!

Sassを利用できる環境にするには以下のモジュールを追加するだけです。

  • sass

yarnで導入

$ yarn add --dev sass

npmで導入

$ 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も導入しています。Pugの導入はこちら!

あとがき

Pugと同様、簡単に導入することができました。

NuxtではPugとSassを積極的に利用していきたいですね!