● Next.js で サイト全体に適用するグローバルな scss (sass) を使用する

・ 1. sassのインストール

npm install sass --save-dev

・ 2. scssファイル群の用意

cd styles
mkdir scss
touch scss/style.scss

styles/scss/style.scss をトップのscssとします

・ 3. pages/_app.js から読み込み

style.scss を _app.js から読み込みます

pages/_app.js

_app.js からの読み込みを style.scss に変更します

import '../styles/globals.css'

　　↓

import '../styles/scss/style.scss'

なお、scss内で画像を使用するときは絶対パスを記述して、画像ファイルは /public/ 以下に置きます

● グローバルなCSSを各ページに記述する

次のようにstyleタグに jsx global を付けることで直接 CSS を記述するのと同じように記述できます

<style jsx global>{`
  .my-class {
    background-color: green;
  }
`}</style>

● Next.js で ページ固有の scss (sass) を使用する

拡張子 「 .module.scss 」なファイルを作成する。 バスはどこでも自由ですが拡張子は必ず module.scss または module.css とします
拡張子を module.scss とした場合は自動的にscss 記法が使用できます

例 : styles/components/404.module.scss

.container_404 {
  border: 1px solid red;
  margin: 50px 0;
  h2 {
    color: blue;
  }
}

表示するコンポーネントから読み込む

import css from "../styles/components/404.module.scss"

以下のように記述して読み込みます

<div className={css.container_404}>