IE9 不识别bundle后的css问题

背景：react + sass + webpack4 + ...

项目需求是只支持safari, chrome, firefox, edge, 其他版本浏览器需要正确显示Sorry, your internet browser is out of date. ...., ... upgrade to a newer version or download another web browser. 的样式。
因此有一段css是专门为这段文字添加的，但是发现IE9 上这些样式并没有加载上。

查了一些资料后，发现IE9会ignore比4000个的selector。

Using webpack to generate your CSS is fun for some definitions of fun. Unfortunately the fun stops when you have a large app and need IE9 support because IE9 will ignore any more than ~4000 selectors in your lovely generated CSS bundle. The solution is to split your CSS bundle smartly into multiple smaller CSS files. Now you can.™ Supports source-maps.

解决方案1：将css单独打包并分为多个小的chunk

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const FastCSSSplitWebpackPlugin = require("fast-css-split-webpack-plugin");

module.exports = {
...,
module: {
rules: [
  ...,
  {

      test: /\.css$/,
      use:ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
  }
]
},
plugins: [
  new ExtractTextPlugin('css/[name].[hash:7].css'),
  new FastCSSSplitWebpackPlugin({size: 4000, filename: "[name].[hash:7].css"}),
  ...
],
...
}

解决方案2:
将这段css放入template html 中，但是不推荐这个方案