I'm having trouble setting up Autoprefixer in my webpack config - css

Question

I've tried copying numerous webpack setups, but I can't seem to get the postcss-loader Autoprefixer to work. I use Flexbox heavily in my projects, and I really want to have webpack add the prefixes for older browsers on yarn build. Right now, the SCSS is compiled into CSS, but no prefixes are added. Here is what my webpack config currently looks like:
webpack.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var autoprefixer = require('autoprefixer');
const baseConfig = require('./base.config.js');
module.exports = merge(baseConfig, {
output: {
filename: 'app.bundle.min.js',
path: path.join(__dirname, '../../assets')
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { sourceMap: true, minimize: true }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('autoprefixer')]
}
},
{
loader: 'sass-loader',
options: { sourceMap: true, minimize: true }
}
],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('app.bundle.min.css'),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()]
}
}),
// Minimize JS
new UglifyJsPlugin({ sourceMap: true, compress: true })
// Minify CSS
/*new webpack.LoaderOptionsPlugin({
minimize: true,
}),*/
]
});

Answer 1

I believe you need to call its constructor i.e require('autoprefixer')()
I'm seeing this in the PostCss Loader README.
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({...options}), // calls constructor with optional options
...,
]
}
}
]
}