Adding postcss and autoprefixer to webpack 2 doesn't prefix

Question

I'm trying to migrate to webpack 2, and I can't seem to get postcss-loader to autoprefix. I read docs, but I can't seem to find the issue. Has anyone run into this problem? If so, could you assist me in resolving my issue?

webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');

// development variables
const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';

// checks if production : development
const entry = PRODUCTION
    ?   [
            './src/index.js'
        ]
    :   [
            './src/index.js',
            'webpack/hot/dev-server',
            'webpack-dev-server/client?http://localhost8080',
    ];

const plugins = PRODUCTION
    ?   [
            new webpack.optimize.UglifyJsPlugin(),
            new ExtratTextPlugin('style-[contenthash:10].css'),
            new HTMLWebpackPlugin({
                template: 'index-template.html'
            })
        ]
    :   [
            new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer(), ] } }),
            new webpack.HotModuleReplacementPlugin(),
        ];

plugins.push(
    new webpack.DefinePlugin({
        DEVELOPMENT: JSON.stringify(DEVELOPMENT),
        PRODUCTION: JSON.stringify(PRODUCTION),
    })
);

// add class name depending on enviroment PROD | DEV
const cssIndentifier = PRODUCTION ? '[hash:base64:10]' : '[path][name]---[local]';

// inject into head in DEV and create CSS file in PROD
const cssLoader = PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?localIdentName=' + cssIndentifier + ',postcss-loader'];

module.exports = {
    devtool: 'source-map', //add source mapping to devtools
    entry: entry,
    plugins: plugins,
    externals: {
        jquery: 'jQuery' //jquery is external and availabe at the global variable jQuery
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader:['babel-loader'],
            exclude: /node_modules/
        }, {
            test: /\.(png|jpg|gif)$/,
            loader:['url-loader?10000&name=images/[hash.12].[ext]'],//use url loader if image is over 10k : use file loader
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loaders: cssLoader,
            exclude: /node_modules/
        }]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: PRODUCTION ? '' : '/dist/',
        filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
    }
};


package.json
{
  "name": "starter",
  "version": "1.0.0",
  "description": "starter project using webpack 2",
  "main": "index.js",
  "scripts": {
    "build": "rimraf dist && NODE_ENV=production webpack",
    "dev": "NODE_ENV=development webpack-dev-server"
  },
  "repository": "https://github.com/rafh/starter-project.git",
  "author": "Rafael Heard rafael.heard@gmail.com",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "css-loader": "^0.26.2",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "loader": "^2.1.1",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.6.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Answer 1

I had the same issue, that helped me:

1) add to your webpack.config.js this:

module.exports = {
    module: {
        rules: [
            {
                test:   /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            }
        ]
    }
}

2) then create a postcss.config.js with:

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

Answer 2

There are a couple issues with your webpack config, and frankly I don't know which one would be causing the issue, so I'll outline all of them and hopefully one of them fixes the issue.

cssLoader defines the array improperly, from what I can tell - the arrow is accidentally included in a string with a plus sign, when it should separate the array:

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?importLoaders=1&minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader'];

For webpack 2, the proper syntax for using loaders is use instead of loaders/loader, like so:

{
    test: /\.css$/,
    use: cssLoader,
    exclude: /node_modules/
}

postcss-loader also suggests usage of ?importLoaders=1 when using the css-loader afterwards, so you should add that to your definition for css-loader:

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader']

And, finally, options should be passed directly to loaders. LoaderOptionsPlugin.options.postcss is not ideal (and I can't see that syntax supported anywhere in the documentation), and the options should be passed when defining the loader. Replace the string 'postcss-loader' in cssLoader with an object for this behavior.

PRODUCTION
    ?   ExtractTextPlugin.extract({
            loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
        })
    :   [
             'style-loader',
             'css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 
             {
                 loader: 'postcss-loader',
                 options: {
                     plugins: function () { return [ autoprefixer ] }
                 }
             }
        ]

The postcss loader readme specifies that options.plugins should be a function which returns an array, which is an odd way to work. If return [ autoprefixer ] doesn't work, the readme says to use return [ require('autoprefixer') ], so try that.

I'm not sure which one of these would cause this issue exactly, but hopefully fixing these issues with your webpack config will fix your loader issue.