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的方案了。
第一步：
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，樣式找到了！