如何实现在项目中按需引入css文件？

Question

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

Answer 1

<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->

Answer 2

两个都要引入
通过css选择器优先级的方式来解决这个问题
讲得稍微具体点就是 ie9 时，swiper 容器加上 class 名 isIE9
然后 idangerous.swiper.css 里所有都加 .isIE9 的前缀
保证优先级比swiper.min.css里的高

Answer 3

首先要明确一点，webpack是做打包的，可以理解为是编译期，在编译期过程中是没有办法预测运行时的环境的。

可以给你提供如下几个实现思路：

1. 也是楼上同学提到的，添加特定的class前缀，但是这个修改成本非常高。不可预测的CSS文件里边有多少class
2. 使用System.import()，不过这个要确保你使用了ExtractTextPlugin这个插件，记得在webpack配置文件中设置ExtractTextPlugin的配置allChunks: true（这种方案不能直接导出CSS文件，而是CSS in JS这样的）
3. 将CSS文件直接作为字符串引入到项目中，判断环境手动生成link标签

几种方案，可以尝试一波，不确定基于webpack还有没有其他方案

Answer 4

来个暴躁的 动态创建link标签 在index.html里面 原生js实现就可以

基于webpack的 可以考虑楼上一些方法 实践一下 均衡利弊吧

Answer 5

将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')    
}

Answer 6

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');
    })
}

具体怎么用，可以去文档里面看一下

Answer 7

其实就是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]判断也很好