Adding autoprefixer to webpack 2.2.1

Question

I'm trying to add autoprefixer to webpack 2.2.1 and having issues seeing the prefixes. I installed postcss-loader https://github.com/postcss/postcss-loader as this seems to be the listed way to handle postcss in webpack.

I'm currently using scss files which I'm importing into my react files. example: import styles from '../../styles/header.scss'; This is handled in webpack using sass-loader.

I'm not getting any error with my setup but I'm also not seeing any autopre-fixing going on to my files ? I presume this only needs to be added in development not production ?

Here is my dev setup webpack config.

const path = require('path')
const webpack = require('webpack')

const ROOT_DIR = path.resolve(__dirname, '../app')

    module.exports = {
      devtool: 'eval',

      entry: [
        `${ROOT_DIR}/js/index`,
        'webpack-hot-middleware/client'
      ],

      output: {
        path: path.resolve(__dirname, '../public'),
        filename: 'bundle.js',
        publicPath: '/public/'
      },

      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
          "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL),
          "config.GA_TRACKING_ID": JSON.stringify(process.env.GA_TRACKING_ID)
        })
      ],
      module: {
        loaders: [
          { test: /\.js?$/,
            loader: 'babel-loader',
            include: path.join(__dirname, '../app'),
            exclude: /node_modules/
          },
          { test: /\.scss?$/,
            include: path.join(__dirname, '../app', 'styles'),
            use: [
               'style-loader',
               'css-loader',
               {
                 loader: 'postcss-loader',
                 options: { plugins: [
                     require('autoprefixer')
                 ] }
               },
               {
                 loader: 'sass-loader',
                 options: {
                   data: "$assetPath: '" + process.env.ASSETS_URL + "';"
                 }
               }
             ]
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            include : path.join(__dirname, '../app', 'images'),
            loader  : 'file-loader?limit=30000&name=[name].[ext]'
          },
          {
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            include : path.join(__dirname, '../app', 'fonts'),
            loader: 'file-loader?name=fonts/[name].[ext]'
          }
        ]
      }
    }

Answer 1

I had a to deal with sometime similar recently. Check if it works if you create a separate postcss.config.js file in the directory of your scss files with this in it

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

and in your webpack config

  { test: /\.scss?$/,
    include: path.join(__dirname, '../app', 'styles'),
    use: [
       {loader: "style-loader"},
       {loader: "css-loader"},
       {loader: "postcss-loader"},
       {loader: "sass-loader",
         options: {
           data: "$assetPath: '" + process.env.ASSETS_URL + "';"
         }
       }
     ]
  },