Search code examples
webpackextracttextwebpackplugin

How extract css files for old IE


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
           }
        })
    ]
}

Solution

  • This is a postcss plugin to solve this problem

    css-split-webpack-plugin

    and the IE's limit is 4095 selectors.