React 生产在 css 桌面和移动文件之间混乱
React production mess up between css files for desktop and mobiles
我正在用 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
我们搬到了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 作为起点。
祝他好运。
我正在用 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
我们搬到了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 作为起点。
祝他好运。