h5中引入css文件,【Web前端问题】如何实现在项目中按需引入css文件？

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]判断也很好