TypeSctipt/vite環境で絶対パス(@)でimportする

import

TypeScript での設定を Vite で使い回せるvite-tsconfig-pathsパッケージをimport

npm i vite-tsconfig-paths

ts.config.json更新

ts.config.jsonが、tsconfig.app.jsonを参照するように設定されているので、tsconfig.app.jsonを編集する。

ts.config.json

// ts.config.jsonは何も編集しない。
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.app.json

{
  "compilerOptions": {
    ...

+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
    
    ...
}

vite.config.ts更新

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
+ import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
      react(),
+       tsconfigPaths()
    ],
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
      },
    },
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});