webpack loader的执行顺序（autoprefixer没起作用的原因）

webpack loader的执行顺序为

从上到下

从右到左

但是代码中

use: ['style-loader',
      'css-loader',
      'sass-loader',
       {
         loader: 'postcss-loader',
         options: {
                   ident: 'postcss',
                   plugins: [
                                require('autoprefixer')
                            ]
                  }
       },
                    
     ],

上面的代码由于postcss-loader先执行了，然后在执行sass

所以没有给sass里的css代码加上兼容性前缀

所以解决办法是将sass-loader放在postcss-loader后面就好了，代码如下

use: ['style-loader',
      'css-loader',
       {
         loader: 'postcss-loader',
         options: {
                   ident: 'postcss',
                   plugins: [
                                require('autoprefixer')
                            ]
                  }
       },
       'sass-loader',
                    
     ],

若是到了这一步问题还没解决，

那你应该得设置支持哪些浏览器，必须设置支持的浏览器才会自动添加添加浏览器兼容。

最终版本代码

               {
                test: /\.scss$/,
                use: ['style-loader',
                'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                          ident: 'postcss',
                          plugins: [
                            require('autoprefixer')({
                                "overrideBrowserslist": [
                                    "defaults",
                                    "not ie < 11",
                                    "last 2 versions",
                                    "> 1%",
                                    "iOS 7",
                                    "last 3 iOS versions"
                                ]
                            }),
                          ]
                        }
                      },
                      'sass-loader',
                    ],
              }

参考文章链接

https://www.cnblogs.com/hellowoeld/p/10571792.html