如何实现在项目中按需引入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

阅读 7.8k
7 个回答

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

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

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

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

  1. 也是楼上同学提到的,添加特定的class前缀,但是这个修改成本非常高。不可预测的CSS文件里边有多少class
  2. 使用System.import(),不过这个要确保你使用了ExtractTextPlugin这个插件,记得在webpack配置文件中设置ExtractTextPlugin的配置allChunks: true(这种方案不能直接导出CSS文件,而是CSS in JS这样的)
  3. 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;
}

效果
css1
刷新一下

css2

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题