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

require.ensure('./foo.css')

或者

import('./bar.css');

Answer 3

if(isMobile){
    import('./app_mobile.css')
}else{
    import('./app.css')
} 

我这样用可以

Answer 4

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