聊聊vue-cli在IE9碰到css样式问题

最新推荐文章于 2023-10-27 11:51:12 发布

weixin_34342905

最新推荐文章于 2023-10-27 11:51:12 发布

阅读量1.5k

点赞数

文章标签： javascript webpack 运维 ViewUI

原文链接：https://juejin.im/post/5c98ef236fb9a071105de387

版权

先说一下项目技术背景，新得项目使用的是vue-cli2.0+，后期发现使用jenkins线上编译很慢，于是把webpack3升级到了4.2，最近项目在做IE9兼容测试，发现很多样式都飞了，小白在本地开发环境进行测试的时候，发现大量css样式无法引入

因为之前小白曾使用seajs+underscore + jquery搭建过一套组件结构，知道在IE9-下css选择器数量、文件大小以及style、link标签引入数量不能超过32个，所以比较轻松可以定位到问题，现在关键的问题是如何修改，在熟悉过vue-cli脚手架之后，发现在build/vue-loader.conf.js中有一段导出配置，代码如下

通过这个配置我们可以看到，开发环境下，css提取是关闭的，vue-loader文档中也提示，请只在生产环境下使用 CSS 提取，这将便于你在开发环境下进行热重载。这就导致所有的组件内部的css都是一个独立的style样式，所以首先应该提取css样式，将extract改为true，但是接着第二个错误出现了

因为在webpack4中提倡使用mini-css-extract-plugin插件，所以我们需要在webpack.dev.conf文件的plugins选项中新增此插件，进行提取

cnpm install mini-css-extract-plugin -D
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: {
    new MiniCssExtractPlugin({
        ...
    })
}复制代码

最后一步，我们引入，csss-split-webpack-pluign插件，进行文件切割

cnpm install csss-split-webpack-pluign -D
var CssSplitWebpackPlugin = require('csss-split-webpack-pluign')
...
plugins: {
    new CssSplitWebpackPlugin({        size: 4000
    })
}复制代码

至此，开发环境在IE9下样式已经完全加载成功。

转载于:https://juejin.im/post/5c98ef236fb9a071105de387