webpack自動添加廠商前綴（postcss-loader的使用）

一、安裝依賴：自動添加廠商前綴需要npm install安裝postcss-loader和autoprefixer

二、

      {
        test: /\.(sass|scss)$/,
        use: ['style-loader','css-loader','postcss-loader','sass-loader']
      }

注意loader的順序不能錯！

三、添加postcss.config.js文件，詳情見https://webpack.js.org/loaders/postcss-loader/#root

module.exports = {
  plugins: [require('autoprefixer')]
}

        老方法是將此文件加上瀏覽器前綴需求配置 ，但是在webpack4.0以上版本打包時會提醒不要這樣做，而是採用第四步的兩種方法。

module.exports = {
  plugins: [
    require('autoprefixer')({
      "browsers": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
  })
  ]
}

四、在package.json中配置

  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

  或者可以新建一個 .browserslistrc 文件

defaults,
not ie < 11,
last 2 versions,
> 1%,
iOS 7,
last 3 iOS versions

 

兩種方法親測都可行，下面是在chrome下的效果圖