【Nuxt】SCSS(SASS)のインストール方法と使い方

Nuxt × SCSSのインストールと使い方
SCSS(SASS)とは？
SCSSのインストール
1. npmを使用している場合
2. yarnを使用している場合
SCSSの使い方
1. SCSSで変数を使ってみる
まとめ

Nuxt × SCSSのインストールと使い方

NuxtでCSSを使う時は、

そのままCSSを当てる
SCSSを使用する
CSS Moduleを使用する

などの方法がありますよね！

CSS Moduleを使うと基本的には名前が被ることはなく、ベストプラクティスではありますが、デザインのコーディングをデザイナーさんがやる場合もあり、敷居が少し高いので選択肢から外れてしまいますよね。

その点SCSSはCSSと互換性があり、デザイナーさんでも取っつきやすいですし、多くの現場で使われています。

ここでは、NuxtでSCSSをインストールする方法と使い方について解説していきます。

SCSS(SASS)とは？

SCSS(SASS)とは？
SCSSとSASSって何が違うの？(混乱する)

このようなことありますよね！

結構複雑なため詳しい解説はこちらでしています！

こちら記事をご参照ください！

SCSSのインストール

ここでは、SCSSのインストールする方法をご紹介します。

npmとyarnのそれぞれのインストール方法について記載していますので、環境に合った方を使用してください！

npmを使用している場合

npmを使用している場合は、以下のコマンドを実行してください！

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

yarnを使用している場合

yarnを使用している場合は、以下のコマンドを実行してください！

$ yarn add --dev sass sass-loader node-sass fibers

SCSSの使い方

SCSSのインストールができたので、SCSSを実際に使ってみて確認してみましょう！

SCSSの基本的な使い方は、こちらの記事へまとまっていましたので、まずSCSSの使い方を確認したい方はこちらをご参照ください。

SCSSで変数を使ってみる

SCSSではプログラミング言語のように変数を使うことができます。

サイトのテーマカラーや繰り返し使用する値を変数化して名前をつけておけるので便利です。

Nuxtでのサンプルコード

以下は、Nuxtでのサンプルとなります。

styleにlang=”scss”を指定することで、簡単にSCSSを使用することができるようになります！

今回の例では、チョコレート色を$color-chocolateと言う変数に格納し、pタグのcolorでその変数を使用して、テキストへ色をつけています！

src/pages/index.vue

<template lang="pug">
  p nuxt-sample
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({})
export default class extends Vue {}
</script>

<style lang="scss" scoped>
$color-chocolate: #d2691e;

p {
  color: $color-chocolate;
}
</style>