NPM Modules Needed

"postcss": "^6.0.7",
"postcss-browser-reporter": "^0.5.0",
"postcss-cli": "^4.1.0",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^10.0.0",
"postcss-url": "^7.1.1",

Add postcss.config.js to root

Create a file called postcss.config.js to the root of your application. Same root as where you webpack.config.js lives.

const path = require('path');
module.exports = {
    plugins: [
        // UglifyJSPlugin mangles valid css during minfication. It is a known issue and this fix was obtained from: https://github.com/webpack/webpack/issues/666#issuecomment-184319770
        require('postcss-import')({
          path: [ path.join(__dirname, './src/public/css')]
        }),
        require('postcss-url'),
        require('postcss-cssnext')({
            browsers: ['last 2 versions', 'ie >= 9', 'iOS >= 9']
        }),
        require('cssnano')({zindex: false})
            // end UglifyJSPlugin fix
    ]
}

Explaination

postcss-import : path, this is the path where you imports live. When you use @import in your css, this is where POSTCSS is going to look for those imports. I put mine inside a folder called public/css under the src folder

postcss-url : url paths in your css

postcss-cssnext : This is used to use css4 in your code. Think of this like babel to JavaScript.

cssnano : Minify you css