scss の読み込みファイルのパスを tsconfig.js の paths で設定した

Next.js で制作している自サイトの scss ファイルを、app/styles/xxx とコンポーネントに合わせてディレクトリを分けるような構成にしている。

各 scss ファイルから mixin ファイルへのアクセスしている部分を @/app/styles/ としていたが、もっと短くしたいと思ったので調べた。

typescript を使っている場合には tsconfig.js 下記の様に記述すれば、パスのエイリアスを設定できビルド時に変換される。

{
  "compilerOptions": {
    // baseUrl と @styles の行を追加
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"],
      "@styles/*": ["./app/styles/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

@/app/styles/ から @styles/ と少し短くなった。

ただ、こういう感じにしていくと ui, data, lib なんかもエイリアスを作った方がいいのかな？
どこまでやればいいか分からなくなった。