Vite打包后React组件样式丢失了怎么办？

世梅（打工版）提问于 2026-03-09 11:01:21 阅读 14

前端

我用Vite + React开发的项目，本地运行一切正常，但执行 npm run build 打包部署到线上后，发现部分组件的CSS样式完全没生效，控制台也没报错，这是啥情况？

我试过把样式写在组件内部用 import './MyComponent.css' 引入，也试过用CSS Modules，但打包后还是没样式。下面是我一个简单组件的写法：

import React from 'react';
import './Button.css';

const Button = () => {
  return <button className="my-btn">Click me</button>;
};

export default Button;

Button.css里就一行：.my-btn { background: red; padding: 10px; }，本地好好的，上线就没了……

我来解答赞 9 收藏

反馈

1 条解答

Mc.东俊 Lv1

这个我遇到过，多半是CSS文件没被打包进去或者路径有问题。先检查几个地方：

第一看看你的vite.config.js配置，确认CSS部分是不是这样的：

export default defineConfig({

  plugins: [react()],

  build: {

    cssCodeSplit: true // 这个一定要是true

  }

})

第二检查打包后的dist文件夹，看里面有没有生成对应的CSS文件。如果连CSS文件都没有，那就是打包配置的问题。

如果CSS文件存在但还是没样式，很可能是路径引用错了。Vite打包后的路径和开发环境不一样，试试在index.html里这样引入：

<link rel="stylesheet" href="/assets/index.12345.css" />

还有个常见坑是部署时nginx配置有问题，导致CSS文件404。检查下服务器是不是正确返回了CSS文件。

我建议先执行npm run build && npm run preview本地预览下打包效果，先排除服务器部署的问题。

2026-03-09 11:05