まずはインストール

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier husky lint-staged prettier このあたりを参考に：Next 12 で ESLint, Prettier, husky, lint-staged の環境構築

ESLintの設定を追加

公式ドキュメント：no-restricted-imports

.eslintrc
{
  "extends": ["prettier"],
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          {
            "group": ["./*", "../*", "!./*.scss"],
            "message": "scssファイル以外の相対パスを使用したimportは禁止です！"
          }
        ]
      }
    ],
    //以下略
  }
}

huskyの設定を追加

.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn check-types
yarn lint-staged
yarn lint:style

説明

.eslintrcの今回追記した"no-restricted-imports"のgroupに禁止したいパスの正規表現を書きます。
scssファイルのみ相対パスでimportを許可しています。
異なるディレクトリに同ファイル名のコンポーネントが存在する場合に、間違ってimportをしないよう制御するのに重宝します。

動作確認

無事、エラーを検出できています。

参考記事

• Next 12 で ESLint, Prettier, husky, lint-staged の環境構築