Add autoprefixer in webpack

Question

My webpack.config.js file:

var path = require("path"),
    src = path.resolve(__dirname, "src"),
    dist = path.resolve(__dirname, "dist"),
    webpack = require("webpack");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractPlugin = require("extract-text-webpack-plugin"),
    CleanWebpackPlugin = require("clean-webpack-plugin"),
    CopyWebpackPlugin = require("copy-webpack-plugin");

var extractCssPlugin = new ExtractPlugin({
  filename: "css/main.min.css"
});

var extractHtmlPlugin = new ExtractPlugin({
  filename: "[name].html"
});

module.exports = {
  entry: {
    bundle: src + "/app/app.js"
  },
  output: {
    path: dist,
    filename: 'js/[name].min.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
                test: /\.js?/,
                include: src,
                loader: "babel-loader",
                query:{
                    presets: ["react", "es2015", "stage-2"]
                }
            },
      {
          test: /\.pug$/,
          loaders: ['file-loader?name=[name].html', 'pug-html-loader?pretty&exports=false']
      },
      {
        test: /\.scss$/,
        use: extractCssPlugin.extract({
          use:[
            {
              loader: "css-loader",
              options: {sourceMap: true, minimize: true}
            },
            {
              loader: "sass-loader",
              options: {sourceMap: true}
            },
            "postcss-loader"
          ]
        })
      }
    ]
  },

  plugins: [
    cleanPlugin,
    copyPlugin,
    extractCssPlugin,
    extractHtmlPlugin,
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ]
}

My postcss.config.js inside src/css/postcss.config.js

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

package.json

{
  "name": "test_project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:prod": "webpack -p",
    "build:dev": "webpack -d"
  },
  "browserslist": ["last 2 versions"],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.9",
    "cssnano": "^3.10.0",
    "extract-loader": "^2.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.0",
    "pug-html-loader": "^1.1.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  },
  "dependencies": {
    "postcss-import": "^11.1.0",
    "precss": "^3.1.2"
  }
}

Just need to add autoprefixer to my css code once the main.scss is compiled to main.css in webpack. I did try using the post-css loader, but I couldn't get it right.

Answer 1

The order of the loader is important for webpack.
Currently, you first prefix everything in all the root files that get loaded form javascript with the postcss-loader.
Then resolve the imports from within the scss files with the sass-loader.
This means that all secondary imports won't get prefixed.

This is an easy fix. Just put the sass-loader first, and you will also want to add sourceMap to the postcss-loader.

use:[
  {
    loader: "css-loader",
    options: {sourceMap: true, minimize: true}
  },
  {
    loader: "postcss-loader",
    options: {sourceMap: true}
  },
  {
    loader: "sass-loader",
    options: {sourceMap: true}
  },
]