React/vite環境でSCSSを使うための設定

インストール

npm add -D sass-embedded

vite.config.tsの設定

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

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