NuxtでSCSSを使用したスタイリングの方法

Nuxt.jsでSCSSを使用するためには、以下の手順に従ってください。

依存関係のインストール: Nuxt.jsプロジェクトのルートディレクトリで、次のコマンドを実行して依存関係をインストールします。
```
npm install node-sass sass-loader --save-dev
```
これにより、SCSSファイルをコンパイルするために必要なパッケージがインストールされます。
SCSSファイルの作成: Nuxt.jsプロジェクト内の任意の場所に、.scss拡張子を持つ新しいSCSSファイルを作成します。例えば、assets/scss/styles.scssというファイルを作成します。
SCSSファイルのインポート: Nuxt.jsプロジェクトのnuxt.config.jsファイルを開き、cssプロパティ内に以下のコードを追加します。
```
css: [
 '@/assets/scss/styles.scss'
],
```
これにより、作成したSCSSファイルがNuxt.jsプロジェクトにインポートされます。

<template>
 <div class="my-component">Hello, World!</div>
</template>
<style lang="scss">
.my-component {
 color: red;
}
</style>

上記の例では、my-componentクラスに対して赤い文字色を指定しています。

これで、Nuxt.jsでSCSSを使用してスタイリングを行う方法がわかりました。SCSSを活用することで、より効率的で柔軟なスタイリングを実現することができます。詳細なSCSSの構文や機能については、公式のSCSSドキュメントを参照してください。