IE9兼容性问题 部分样式丢失

背景：

项目（react+react-router+antd+less）是使用create-react-app脚手架生成的react项目，且没有弹出内建，对于使用antd和less的配置是通过react-app-rewired这个插件，然后通过config-overrides.js这个文件将部分webpack的配置进行拓展。这里不清楚的可以查看之前项目搭建的文章：https://www.jianshu.com/p/ccdb52ac6a41

问题：

这一次在IE9上又双叒叕碰了和上次类似的css样式问题（上篇聊到IE9样式无法加载的文章：https://www.jianshu.com/p/ebfc4d3ecf9c），这次的问题更诡异，打开页面发现有的页面没问题，有的页面乱了，仔细对比查看IE9中该页面的css样式根本没有加载进来。

解决方案：

按照上次的思路，依旧怀疑IE9无法接受这么大的css文件，再重复下这个要求：

KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

• A sheet may contain up to 4095 rules
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

更多详情（Stylesheet Limits in Internet Explorer）：
https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/

发现我的css文件有360k，一般250k就基本上有4000条rules了，而这次没必要的样式已经去除了，文件依旧很大，所以这次只能采用切分css的方案了。

第一步：

安装插件css-split-webpack-plugin

npm i css-split-webpack-plugin

第二步：

配置webpack,官方要求如下:

const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
...

plugins: [
        ...
        new CSSSplitWebpackPlugin({
            size: 4000,
            filename: 'dist/css/[name]-[part].[ext]'
        }),
        ...
    ]

但是我们的项目未弹出内建，无法直接配置，此时打开config-overrides.js(之前说了他可以覆盖webpack的配置),按如下的方式配置：

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;

module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" }})(config, env);
    config.plugins.push(
        new CSSSplitWebpackPlugin({
        size: 4000,
        filename: 'static/css/[name]-[part].[ext]'
        }));
    return config;
};

就是把plugins的数组中再加一项。

第三步：

重新运行打包

npm run build

此时就可以看见两个css文件了，如下图：

image.png

再次打开万恶的IE9，样式找到了！