React+Viteでパスのエイリアスを使いたいときのメモ

環境：React 18.2.0, Vite 4.0.2
パスのエイリアスを使いたいときのメモ
resources内のcssディレクトリを~で表現するようにします。
vite.config.jsに追加します。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
+ import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
+    resolve: {
+        alias: {
+          '~': path.resolve(__dirname, './resources/css/'),
+        },
+      },
});

これで以下のように使えました。

test.jsx

import '~/test.css';
// ...

vscodeで開発していたのでjsconfig.jsonにも追加しておきました。

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"],
+            "~/*": ["resources/css/*"]
        }
    },
    "exclude": ["node_modules", "public"]
}