背景：
项目（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的方案了。
第一步：
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文件了，如下图：
再次打开万恶的IE9，样式找到了！
