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>
表示結果
こんな感じでテキストがチョコレート色になっていれば、ちゃんとSCSSが使えるようになっています!

まとめ
今回は、NuxtでSCSSのインストール方法と使い方を学習しました!
SCSSは非常に学習コストが低く、CSSを使っている方でも使いながら簡単に覚えることができます!
CSSを書いている方は、この機会に是非便利なSCSSを使ってCSSを書いてみましょう!
コメント