My project environment is
webpack 1.15.0
extract-text-webpack-plugin 1.0.1
I extract the styles into a single css file, and it works well in chrome firefox and IE10+, but not in IE9-.
I have find that the old IE have limits for css file:
A sheet may contain up to 4095 rules(maybe selectors)
A sheet may @import up to 31 sheets
@import nesting supports up to 4 levels deep
but my extracted css file have 4095+ selectors.
So, is there a way to split the extracted css file by a limit function automatically? like :
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
]
},
plugins: [
new ExtractTextPlugin("styles.css",{
// options callback -- how to handle the extracted result
callback: function(extractedResult){
// some limit api that the extractedResult can be split into pieces
}
})
]
}
This is a postcss plugin to solve this problem
css-split-webpack-plugin
and the IE's limit is 4095 selectors.