需求：在移動端需要加載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文件都加載了。問題：為什么會這樣？有什么解法嗎？
2 回答
慕斯王
TA貢獻1864條經(jīng)驗 獲得超2個贊
為啥樓上大體解釋了，解法的話 可以把兩個css都打包，然后根據(jù)屏幕大小引入不同的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">
- 2 回答
- 0 關注
- 1602 瀏覽
添加回答
舉報
0/150
提交
取消