使用react-scripts build部署时react-paginate CSS丢失问题求助

我之前也踩过这个坑！react-paginate v5.2.3在生产环境丢失.pagination类样式的问题，几乎都是因为没有显式导入组件的CSS文件，或者生产构建的优化工具把未被引用的CSS给剔除了。下面是几个靠谱的解决办法：

1. 显式导入react-paginate的默认CSS #

react-paginate从v5版本开始，不再自动注入样式，必须手动导入它的CSS文件。开发环境可能因为打包工具（比如webpack的dev模式）的宽松配置，偶然加载了样式，但生产环境的树摇（tree-shaking）优化会把未被显式引用的资源删掉。

在你使用ReactPaginate的组件文件里，加上这行代码：

import ReactPaginate from 'react-paginate';
import 'react-paginate/dist/react-paginate.css'; // 就是这行！

也可以把这行导入放在全局的样式入口文件（比如index.css或者App.css）里，确保整个应用都能加载到。

2. 检查生产构建的CSS优化配置 #

如果已经导入了CSS但还是没生效，可能是你的打包工具（比如Create React App、Vite、Webpack）在生产构建时做了过度优化，误判这些CSS类没有被使用。

• 如果你用Create React App：不需要额外配置，只要显式导入了CSS，打包工具会识别到组件里用到的类，不会把它删掉。
• 如果你用自定义Webpack配置：检查mini-css-extract-plugin和css-minimizer-webpack-plugin的配置，确保没有把react-paginate/dist/react-paginate.css加入到排除列表里。

3. 手动编写自定义样式（备选方案） #

如果上面的方法都不生效，你可以自己复刻react-paginate的默认样式，确保生产环境能加载到你的自定义CSS。比如：

.pagination {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 20px 0;
  list-style: none;
}

.pagination__page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
  text-decoration: none;
}

.pagination__page-link:hover {
  z-index: 2;
  color: #0056b3;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.pagination__page-link.active {
  z-index: 3;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

你可以根据自己的需求调整样式，确保和开发环境的效果一致。

内容的提问来源于stack exchange，提问作者Rohit Jain