【Next.js】Sassをインポートする方法まとめ

はじめに

NextjsにおいてSassファイルをインポートする場合、ユースケースによってやり方が異なるので、混同しないよう気をつけなければなりません。本記事では以下３つのパターンについて、それぞれ解説していきます。

1. 他のSassファイルにインポートする
2. JSXファイルにグローバルインポートする
3. JSXファイルにローカルインポートする

環境

バージョンが違うと動かない可能性があるので、その際はいちばんしｔに貼ってあるドキュメントを参照してください。

• Next@14.0.0
• Reat@18.2.0
• Sass@1.69.5

1. 他のSassファイルにインポートする方法

Sassファイルの読み込みを宣言する方法として、かつては@importが採用されていました。しかし、この方法でインポートされた変数や関数は、他のファイルと名前衝突を起こす可能性があったり、クラスがどのファイルで定義されたのか分かりにくいという問題点等を抱えていたため、2021年に非推奨となりました。

現在では代わりに@useを使用することになっています。@useでインポートした変数を使用する際は、値の前に名前空間（どのファイルから読み込むか）を記述する必要があります。

colors.scss

@use "@/styles/fonts";
@use "@/styles/variables" as var; // エイリアス

.blueButton {
  color: blue;
  font: fonts.$default
  width: var.$buttonWidth
}

$blue: #49BCBD;

2. JSXファイルへのグローバルインポート

JSXへのSassファイルのインポートは、JSファイルのimportと同じ方法で出来ます。この方法でインポートしたクラスは、インポート先のJSXが含む全ての子コンポーネント内で使用することが可能です。

import "@/styles/colors.scss";

export default function Parent() {
    return (
        <button className="blueButton">Click me!</button>
        <Child /> // Childコンポーネント内でもcolors.scssの中身が使える
    )
}

ただし、変数や関数についてはこの限りではありません。以下のコードはエラーになります。

import "@/styles/colors.scss";

export default function Parent() {
    return (
        <button style={{ color: $blue }}>Click me!</button>
                             // ↑はエラーになる
    )
}

JSX内で変数を使用したい場合、後述する３番目の方法を使用する必要があります。

3. JSXファイルへのローカルインポート

CSS Moduleという機能を使うことで、インポートしたSassの影響範囲をローカルに限定することが出来ます。実装方法としてはファイル名に.moduleを追加するだけです。(ex. colors.module.sass)

import "@/styles/colors.module.scss";

export default function Parent() {
    return (
        <button className="blueButton">Click me!</button>
        <Child /> // Childコンポーネント内ではcolors.module.scssは使えない
    )
}

JSX内でSass変数を使用したい場合、以下のように明示的にexport宣言する必要があります。

$blue: #64ff00;
 
:export {
  blue: $blue;
}

また、importする際にモジュール名を設定する必要があります。

import variables from './colors.module.scss'
 
export default function Page() {
    return (
        <h1 style={{ color: colors.blue }}>Hello, Next.js!</h1>
    )
}

参考