react动态引入CSS文件的问题？

Question

需求：在移动端需要加载app_mobile.css，在Web端加载app.css。代码如下：import React, { Component } from 'react';const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); isMobile ? require('./app_mobile.css') :  require('./app.css');结果：在Dev模式下，chrome浏览器，切换web和mobile模式，验证正确。但是，webpack打包后（create-react-app命令默认的webpack配置），线上在移动模式下，将两个CSS文件都加载了。问题：为什么会这样？有什么解法吗？

Answer 1

为啥楼上大体解释了，解法的话 可以把两个css都打包，然后根据屏幕大小引入不同的css

<link rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" href="...1920">
<link rel="stylesheet" media="screen and (max-width:1024px)" type="text/css" href="...1024">

Answer 2

打包是一个预编译的过程, 所以打包的时候并不知道isMobile的值, 建议不用require的方式引入, 用append的方式试一下