亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react動態引入CSS文件的問題?

react動態引入CSS文件的問題?

揚帆大魚 2019-03-13 14:56:17
需求:在移動端需要加載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條經驗 獲得超2個贊

為啥樓上大體解釋了,解法的話 可以把兩個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">


查看完整回答
反對 回復 2019-03-13
?
交互式愛情

TA貢獻1712條經驗 獲得超3個贊

打包是一個預編譯的過程, 所以打包的時候并不知道isMobile的值, 建議不用require的方式引入, 用append的方式試一下

查看完整回答
反對 回復 2019-03-13
  • 2 回答
  • 0 關注
  • 1604 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號