if (!isIE9) {
import 'swiper/dist/css/swiper.min.css'
} else {
import 'swiper2/dist/idangerous.swiper.css'
}
如上会报错'import' and 'export' may only appear at the top level
由于项目需要支持ie9,有部分组件使用了swiper,想要在较新的浏览器中用较新的样式,ie9用较老的版本,有什么办法实现呢?技术栈为vue.js
回答:
回答:
两个都要引入
通过css选择器优先级的方式来解决这个问题
讲得稍微具体点就是 ie9 时,swiper 容器加上 class 名 isIE9
然后 idangerous.swiper.css 里所有都加 .isIE9 的前缀
保证优先级比swiper.min.css里的高
回答:
首先要明确一点,webpack是做打包的,可以理解为是编译期,在编译期过程中是没有办法预测运行时的环境的。
可以给你提供如下几个实现思路:
也是楼上同学提到的,添加特定的class前缀,但是这个修改成本非常高。不可预测的CSS文件里边有多少class
使用System.import(),不过这个要确保你使用了ExtractTextPlugin这个插件,记得在webpack配置文件中设置ExtractTextPlugin的配置allChunks: true(这种方案不能直接导出CSS文件,而是CSS in JS这样的)
将CSS文件直接作为字符串引入到项目中,判断环境手动生成link标签
几种方案,可以尝试一波,不确定基于webpack还有没有其他方案
回答:
来个暴躁的 动态创建link标签 在index.html里面 原生js实现就可以
基于webpack的 可以考虑楼上一些方法 实践一下 均衡利弊吧
回答:
将import 换成 require就行了
if (!isIE9) {
require('swiper/dist/css/swiper.min.css')
} else {
require('swiper2/dist/idangerous.swiper.css')
}
=======================================================================
为什么被踩了,亲测可行啊,原理上,不管是import还是require,最后都转成webpack_require。
main.js 随机加载css
var r = Math.random();
if(r>0.5) {
require('./assets/css1.css')
}else {
require('./assets/css2.css')
}
css1:
body {
background-color: #2C3E50;
}
css2:
body {
background-color: cadetblue;
}
效果
刷新一下
两个css都会打包啊,不用考虑webpack是否识别navigator啊,它才不管你代码写得对不对呢
function isIe9() {
return navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9."
}
if(isIe9()) {
require('./assets/css1.css')
}else {
require('./assets/css2.css')
}
回答:
webpack 的 require.ensure可以了解一下,它就是处理按需加载的
if(!isIE9){
require.ensure([], function () {
require('swiper/dist/css/swiper.min.css');
})
}else{
require.ensure([], function () {
require('swiper2/dist/idangerous.swiper.css');
})
}
具体怎么用,可以去文档里面看一下
回答:
其实就是js按需加载css问题,
const loadCss = url => {
let link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
document.body.appendChild(link);
};
if(!isIE9)
loadCss(...)
else
loadCss(...)
加载的地址须是静态的, 用[if lt IE 9]判断也很好