Add browser compatibility to CSS3 styles using Postcss-loader and autoprefixer in Webpack3

1. The following two loader must be installed in the Webpack to handle CSS

NPM Install--save-dev Css-loader style-loader

2. To process sass and add browser prefixes, you need to download the following plugins and loader

Sass-loader depends on Node-sass, so install Node-sass
Postcss-loader autoprefixer postcss handles browser compatibility

NPM Install--save-dev sass-loader node-sass postcss-loader autoprefixer postcss

The configuration in 3.webpack is as follows

This is an example provided by the official website can be used completely, do not have to create a separate configuration file

Click to enter the official website address

{     /\.scss$/,     /node_modules/, use     : [            ' Style-loader ',           ' Css-loader ', options: {Importloaders:2}},  //2 a few loader           ' Postcss-loader ' on behalf of Css-loader Options:{plugins:[require ("Autoprefixer") ("Last Versions")]}}           ,' Sass-loader '          } 

4. After packing, the effect is as follows

You will never have to consider the browser compatibility issue again.

Add browser compatibility to CSS3 styles using Postcss-loader and autoprefixer in Webpack3