webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀

由于市面上存在几大主流浏览器，当我们在编写CSS相关属性的时候，需要添加兼容各浏览器的前缀，但是这样非常耗时、影响工作效率。

比如编写：

1 .searchBox{
2     display: flex;
3 }

但我们想要的是这种：

1 .searchBox{
2     display: -webkit-box;
3     display: -webkit-flex;
4     display: -moz-box;
5     display: -ms-flexbox;
6     display: flex;
7 }

那么，接下来有办法解决该问题。

安装

1 npm install node-sass sass-loader css-loader style-loader postcss-loader autoprefixer -D

配置 webpack.config.js

 1 module.exports = [
 2     module: {
 3         rules: [
 4              {    
 5                   test: /\.(scss|css)$/,    //打包css、sass文件
 6                   use:[{
 7                             loader:'css-loader',
 8                             options: { minimize: false }
 9                        },
10                        {
11                             loader:'sass-loader'
12                        },
13                        'postcss-loader'
14                    ]        
15               }
16          ]
17     }
18 ]    

创建 postcss.config.js文件

该文件与webpack.config.js在同一目录下，配置如下：

1 module.exports = {
2      plugins : [
3          require('autoprefixer')({
4              browsers : ['last 100 versions']      //必须设置支持的浏览器才会自动添加添加浏览器兼容
5          })
6      ]
7  };

好了，基本配置就是这些，之后打包css的时候会自动添加前缀。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！