Vite+React-Router v7框架模式下构建后样式未生效问题求助

阿华AIGC实验室

2026-4-3

各位好，我遇到了一个很棘手的问题，想请大家帮忙排查一下：

我正在用 Vite + React-Router v7框架模式（ssr: false） 开发React应用，开发模式下所有样式都能正常生效——我既用了SCSS模块，也引入了全局的app.scss文件。但当我构建项目后，用npx serve -s build/client启动生产环境服务时，页面完全没有样式生效。奇怪的是，浏览器网络面板里明明能看到样式文件已经成功加载了，但就是没有被应用到页面的<head>中。

以下是我的相关配置代码：

Vite配置文件

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [reactRouter(), tsconfigPaths()],
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
});

React Router配置文件

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

根组件 root.tsx

import { 
  Links, 
  Meta, 
  Outlet, 
  Scripts, 
  ScrollRestoration, 
} from "react-router";
import "./app.scss";

export function Layout() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta 
          name="viewport" 
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 
        />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

我已经尝试过这些方法，但都没解决问题：