Webpack 4, postcss-loader and autoprefixer plugin

Question

I'm getting quite frustrated trying to get autoprefixer working.

Here is my webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader", options: {} },
                    { loader: "postcss-loader", options: {} },
                    // {
                    //  loader: "postcss-loader",
                    //  options: {
                    //      ident: "postcss",
                    //      plugins: (loader) => [
                    //          require('autoprefixer')({ browsers: ['defaults']})
                    //      ]
                    //  }
                    // },
                    { loader: "sass-loader", options: {} }
                ]
            },
            {
                test: /\.mp3$/,
                use: {
                    loader: "file-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css"
        })
    ]
};

module.exports = config;

Here is my postcss.config.js

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

Currently my package.json is holding my browserslist options

As you can see I've tried using the webpack file to hold my config settings for postcss-loader and I've also tried creating a separate config file.

I've tried moving the browserslist but I don't think that's the issue bc I run npx browserslist and I can see a list of browsers that were selected.

My postcss-loader declaration in my webpack config comes after css-loader and before sass-loader

I also receive no errors in my console when I run webpack so not sure what is happening but could really use some help!

Answer 1

Not working but { browsers: ['defaults']}

Try:

     {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader?modules&importLoaders=1&localIdentName=[local]_[hash:base64:6]',
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [require('autoprefixer')({
                        'browsers': ['> 1%', 'last 2 versions']
                    })],
                }
            },
        ]
    }

or

// postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')({
            'browsers': ['> 1%', 'last 2 versions']
        })
    ]
};

Answer 2

The big picture here is that you are actually missing the Autoprefixer package on your environment, so to fix the problem you have two solutions:

Solution 1

npm install --save-dev postcss-loader autoprefixer

Now inside your postcss.config.js file you can add something like this:

module.exports = {
  plugins: [
    require('autoprefixer')({
      'browsers': ['> 1%', 'last 2 versions']
    })
  ]
};

Solution 2 (recommended)

This one comes from PostCSS Loader documentation, and since you are using this package perhaps this is the recommended way to go.

postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset.

As you can see in order to get Autoprefixer you just need to install PostCSS Preset Env.

npm install --save-dev postcss-loader postcss-preset-env

Now get rid of your postcss.config.js file and move that configuration into your webpack.config.js to make it look to something like this:

...
rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: "css-loader", options: {} },
      {
        loader: "postcss-loader",
        options: {
          ident: 'postcss',
          plugins: [
            require('autoprefixer')({
              'browsers': ['> 1%', 'last 2 versions']
            }),
          ]
        }
      },
      { loader: "sass-loader", options: {} }
    ]
  }
]
...

I hope this helps, it also took me a long time to figure it out too ;)