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

需求:

在移动端需要加载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文件都加载了。

问题:
为什么会这样?有什么解法吗?


扬帆大鱼
浏览 1581回答 2
2回答

慕斯王

为啥楼上大体解释了,解法的话 可以把两个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">

交互式爱情

打包是一个预编译的过程, 所以打包的时候并不知道isMobile的值, 建议不用require的方式引入, 用append的方式试一下
打开App,查看更多内容
随时随地看视频慕课网APP