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