Webpack and PostCSS Autoprefixer not compiling Sass partials

Question

I'm using Webpack to compile Sass and the PostCSS autoprefixer is not working on partials being imported into the style.scss entry point.

Adding styles directly to style.scss are being prefixed as expected, yet any file referenced as an @import is not being autoprefixed.

I have added webpack.config, postcss.config and style.scss for reference below.

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'], 
    output: {
        filename: './js/bundle.js',
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/'
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {}  
                }
            ]
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader', 'postcss-loader']
            }),
            exclude: /node_modules/,
        }
    ]},

    plugins: [
        new ExtractTextPlugin({ filename: './css/style.css' })
    ]

};

postcss.config.js

module.exports = {
  map: false,
  plugins: {
    'autoprefixer': {browsers: ['last 2 versions', '> 5%']},
  }
}

style.scss

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import 'partials/admin'; 
@import 'partials/nav';
@import 'partials/photos';  
@import 'partials/no-results';  
.test{
   display: flex; // <- This is being prefixed as expected.
}

Is there a special loader or syntax I am missing get the @import files autoprefixed?

* EDIT *

I was able to solve this by adjusting the order of the scss loaders.

{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
     { loader: 'css-loader' },
     { loader: 'postcss-loader' },
     { loader: 'sass-loader', 
        options: {
           outputStyle: 'expanded'
        },
     }
   ]
}),
exclude: /node_modules/,
}

Answer 1

You might want to try postcss-scss

I further provide a postcss.config.js:

module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}

Good luck