Webpack CSS Compression incompatible IOS8 problem exploration

Webpack uses the Postcss autoprefixer plugin and uses Cssnano when compressing the CSS, which causes the problem that some compatible prefixes (such as-webkit-) are removed when the CSS is improperly handled.

The Autoprefixer configuration for Postcss is as follows:

autoprefixer ({              browsers: [' > 1% ', ' IOS >= 7 ', "IE >= 7", ' Android >= 2.4 '          )})

CSS compression is configured as follows:

// Compress CSS Code        New Optimizecssassetsplugin ({            /\.css\.* (?!. *map)/g,  // Note Do not write/\.css$/g            cssprocessor:require (' Cssnano '),            Cssprocessoroptions: {                 true  },                //  avoid Cssnano recalculation Z-index                  true            }                    )

By looking at the data found that if you are using the webpack1.x version, UglifyJsPlugin the plug-in opens the minimize, causing Css-loader to also turn on the compression, then Css-loader will use Cssnano to compress, Instead, Cssnano uses the autoprefixer to perform irrelevant prefix cleanup. So you can -autoprefixer tell Css-loader to turn off this feature by adding parameters to Css-loader autoprefixer , and don't force the deletion of certain prefixes that you don't think are important.

{test:/\.less$/,   loader: ' Style-loader!css-loader?minimize&-autoprefixer!postcss-loader!less-loader '},

And the above reasons have been repaired in webpack2.x, Webpack2 UglifyJsPlugin plug-in removed the forced opening minimize.

However, if you are not using the webpack1.x, through the troubleshooting found that the CSS compression plug-in is not used, the compatibility prefix is normal, once the use of Optimizecssassetsplugin to compress the CSS will lose part of the WebKit prefix.

As mentioned above, Cssnano will use Autoprefixer to automatically erase some prefixes that he deems unimportant. The default in Optimizecssassetsplugin is to use Cssnano. So we actively shut down the Cssnano autoprefixer function, because we have used the Autoprefixer plugin in postcss, there is no need to reuse it.

Here's how to fix it:

//Compress CSS Code        NewOptimizecssassetsplugin ({assetnameregexp:/\.css\.* (?!. *map)/g,//Be careful not to write/\.css$/gCssprocessor:require (' Cssnano '), cssprocessoroptions: {discardcomments: {removeall:true },                //Avoid Cssnano recalculation Z-indexSafetrue,                 //Cssnano can typically reduce the size of at least 50% by removing annotations, whitespace, repeating rules, outdated browser prefixes, and making other optimizations .                 //The Cssnano integrates the functionality of the autoprefixer. The autoprefixer is used to clean up unrelated prefixes. Default incompatible iOS8, some webkit prefixes are removed, such as Flex                 //so choose Close here, use Postcss's Autoprefixer functionAutoprefixer:false}, Canprint:true        })

Once again the compression state is found with the full compatibility prefix, iOS8 incompatibility problem is also resolved.

Reference:

http://www.css88.com/archives/7317

Https://github.com/ShowJoy-com/showjoy-blog/issues/31

Https://www.w3cplus.com/css/taobao-2018-year.html

Webpack CSS Compression incompatible IOS8 problem exploration