css - React 生产在桌面和移动设备的 css 文件之间困惑

Question

我正在用 React 开发一个网站。为了区分移动用户和桌面用户，我使用了一个我在所有页面上集成的小脚本:

if (/Android|iPhone/.test(navigator.userAgent)) require("link/to/mobile/stylesheet");
else require("link/to/desktop/stylesheet");

问题是，在开发构建期间它运行良好，但是当我将生产版本发送到我的 Apache 服务器时，它混合了两种样式。我很确定这是因为 gzip 压缩(将所有 css 统一在一个文件中)，但我完全不知道如何避免它。另外，我在互联网上发现没有人遇到同样的问题。有什么想法吗？

这里有两张图片，一张是它应该看起来的样子，另一张是生产版本。这对网站的其他部分来说更糟。 Production (messed up one) Original One

Answer 1

我们搬到了Chat ,

回顾:

create-react-app 用于设置元素
create-react-app 使用 webpack 作为它的打包器，

运行本地开发服务器时，不会捆绑 css 文件。但是，当使用 npm build --production 创建生产版本时。默认配置会将所有 css 打包到 1 个文件中。

解决方案:

要么确保捆绑的 css 句柄对移动设备和桌面设备都有效。 IE 通过使用 media queries
或者修改 webpack 配置以创建 2 个单独的 css 文件。

Quentin 将尝试通过 webpack 分离 css 文件。使用这个 article作为起点。

我祝他好运。