在webpack中使用postcss 和 autoprefixer幫css自動增加前綴詞

因應Css3為了各家瀏覽器需要增加的前綴詞(-webkit-, -moz-, -o-, -ms-)，webpack也有能夠幫你自動產生的小套件。

首先，我們要先安裝postcss 和 autoprefixer：

npm install --save-dev postcss-loader autoprefixer

然後我們要新增一隻 postcss.config.js放在專案目錄下，內容如下：

module.exports = {
  plugins: [
    require('autoprefixer')({
      grid: true,
      overrideBrowserslist: [
        '> 1%',
        'last 5 versions',
        'Firefox >= 45',
        'ios >= 8',
        'ie >= 10'
      ]
    })
  ]
}

接著在module裡設定好規則：

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

loader 的執行順序都是由後往前執行，所以這邊執行的規則是用sass-loader編譯然後依序是自動增加前綴詞postcss-loader、css編譯css-loader、最後再執行style-loader。

如果想把css拆分我們一樣更改一下使用規則：

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