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&nbsp;rel="stylesheet"&nbsp;media="screen&nbsp;and&nbsp;(min-width:1025px)"&nbsp;type="text/css"&nbsp;href="...1920"> <link&nbsp;rel="stylesheet"&nbsp;media="screen&nbsp;and&nbsp;(max-width:1024px)"&nbsp;type="text/css"&nbsp;href="...1024">

Answer 2

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