Next.jsでSASSを使おうとしたらSassError: @use rulesでめっちゃ詰まった

next.js14のプロジェクトにSASSを使おうと思って詰まったので備忘。
CSSはFLOCSSを使おうとしているためstyleディレクトリ配下に置いている。
エラーの原因はnext.config.mjsのsassOptionsの書き方だった。

# 開発環境
```
"dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
},
"devDependencies": {
    "sass": "^1.77.2"
}
```

# 最終的にうまくいったコード

```next-projectのディレクトリ構成
src/
 |- app/
 |   |- layout.js
 |   |- page.js
 |   |-component
 |        |-Header.js
 |- style
 |   |- foundation
 |   |    |- _base.scss
 |   |    |- _index.scss
 |   |    |- _reset.scss
 |   |- global
 |   |    |- _index.scss
 |   |    |- _mixin.scss
 |   |    |- _variables.scss
 |   |  ~ 省略 ~
 |   |- style.scss
next.config.mjs
```

```/src/app/layout.js
import "../style/style.scss";

~省略~
```

```/src/style/foundation/_base.scss
@use "../global/" as *; //@useでglobalを読み込む

html {
	font-size: 62.5%;
}

body {
	background: $color-main;
	font-size: 1.6rem;
	line-height: 1.4;

	@include sp {
		font-size: 1.4rem;
	}
}
```

```/src/style/foundation/_index.scss
@forward "./reset";
@forward "./base";
```

```/src/style/style.scss
@use "./foundation";
```

```next.config.mjs
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

export default nextConfig;

```

# エラー　SassError: ＠use rules must be written before any other rules.
原因はnext.config.mjsのsassOptionsの書き方だった。

## エラー全文
```
Failed to compile
SassError: @use rules must be written before any other rules.
  ╷
3 │ @use "foundation";
  │ ^^^^^^^^^^^^^^^^^
  ╵
  src/style/style.scss 3:1  root stylesheet

Import trace for requested module:
./src/style/style.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/style/style.scss
./src/style/style.scss
```
## エラー発生時のnext.config.mjs
sassOptionsの書き方の部分でsrc/style/global/を全てのSCSSファイルに効かせようとしていた。
```next.config.mjs
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const nextConfig = {
  sassOptions: {
    prependData: `@import "${path.resolve(
      __dirname,
      "src/style/global/_index.scss"
    )}";`,
  },
};

export default nextConfig;
```

上記nextConfigファイルで＠useでglobalを記載していなくても変数が使えたため、```@use "../global/" as *;```を記載していなかった。
```/src/style/foundation/_base.scss
html {
	font-size: 62.5%;
}

body {
	background: $color-main;
	font-size: 1.6rem;
	line-height: 1.4;

	@include sp {
		font-size: 1.4rem;
	}
}
```

## エラーに至ってしまった経緯と解決まで
公式サイトのconfig設定からsassOptionsの部分をそのまま持ってくるだけだと「__dirname」の部分でエラーが出てしまい、ローカルサーバが終了してしまった。

```config.js
const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}
```

```エラー
ReferenceError: __dirname is not defined in ES module scope
```
そのため「next.js scss」などで検索して変数をファイル全体で使用する設定を見つけたわけだが、＠useエラーにぶつかってしまった。

「__dirname」の部分でエラーはnext.config.mjsに以下部分を追加すると解消される。
```next.config.mjs
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));
```

＠useのエラー内容で検索してもnext.configの書き方についての記事は出てこず苦戦した。
「__dirname」のエラー解消の上記記述を残したままsassOptionsを公式の書き方に戻してみたところ、「_base.scss」内で使用していた変数（$color-main）の部分がSassErrorで出てきたため「_base.scss」に「＠use "../global/" as *;」の記述を追加したところ正常にコンパイルでき解決に至った。
　

# 参考サイト
https://nextjs.org/docs/app/building-your-application/styling/sass

https://qiita.com/Tao119/items/7988e72cb8e6a43252e1

https://qiita.com/kobari_h/items/0f117d1e3b7958e453e7

https://byby.dev/node-dirname-not-defined