如何使用 Electron-builer 在 Electron 应用程序中包含 tailwindcss 样式？

Question

我正在开发一个简单的电子应用程序。我使用 React 和 vite 作为应用程序的前端。将 tailwindcss 添加到项目后，应用程序在构建为生产发行版时仅显示一个白色页面。当我在开发模式下运行它时，一切正常。 有谁知道为什么会发生以及如何解决它？

我用来设置项目的教程：https://www.youtube.com/watch?v=fP-371MN0Ck

这是我的 vite.config.ts：

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    css: {
        postcss: {
            plugins: [tailwindcss(), autoprefixer()]
        }
    },
    base: "./",
    build: {
        outDir: 'dist-react'
    },
    server: {
        port: 5123,
        strictPort: true
    }
});

package.json：

{
  "name": "converter-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "npm-run-all --parallel dev:react dev:electron",
    "dev:react": "vite",
    "dev:electron": "npm run transpile:electron && cross-env NODE_ENV=development electron .",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "transpile:electron": "tsc --project src/electron/tsconfig.json",
    "dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
    "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
    "dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64"
  },
  "dependencies": {
    "csv-parse": "^5.6.0",
    "csv-stringify": "^6.5.2",
    "mgrs": "^2.0.0",
    "proj4": "^2.15.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.0.2",
    "sqlite3": "^5.1.7",
    "uuid": "^11.0.3",
    "xlsx": "^0.18.5",
    "zip-lib": "^1.0.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.15.0",
    "@types/archiver": "^6.0.3",
    "@types/node": "^22.10.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "cross-env": "^7.0.3",
    "electron": "^33.2.1",
    "electron-builder": "^25.1.8",
    "eslint": "^9.15.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.12.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.15.0",
    "vite": "^6.0.1"
  }
}

tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{html,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

电子构建器.js

{
  "appId": "com.converter-app",
  "icon": "./icon.png",
  "files": [
    "dist-react",
    "dist-electron",
    "assets/**/**"
  ],
  "extraResources": ["dist-electron/preload.cjs", "assets/**/**"],
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage",
    "category": "Utility"
  },
  "win": {
    "target": [
      "portable"
    ]
  }
}

Answer 1

该问题是由于在React中使用BrowserRouter而不是HashRouter引起的。