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!

ynceonrudi · Accepted Answer · 2018-04-12T07:08:25.243

23

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']
        })
    ]
};

edited Apr 12 '18 at 07:08

answered Apr 12 '18 at 06:41

ynceonrudi

258
2
7

I tried using different values for the browsers list, but it's still not working. I don't think the browsers list is the problem because I run `npx browserslist` and I can see which browsers should be affected. – doublea Apr 13 '18 at 15:32
I tried to edit my previous comment, but your answer actually does work! I know I tried different values for the browsers option but for some reason it is working this morning... it's possible I had spelling errors I suppose. The only value that doesn't seem to work is the `defaults` option. Thanks for posting! – doublea Apr 13 '18 at 15:48
This also worked for me after trying everything else +1 – sol Sep 05 '18 at 05:11

score 16 · Answer 2 · answered Dec 20 '18 at 18:06

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 ;)

Looks like you still declare plugins with preset available. – vintprox May 06 '19 at 08:27 — vintprox, May 06 '19 at 08:27

score 5 · Answer 3 · edited Jun 18 '18 at 08:28

5

As mentioned above, you need to specify the browser-list. But instead of adding this to your webpack.config and to the postcss-config you can add the following code simply to the package.json after the dependencies. Worked for me.

"browserslist": [
  "> 1%",
  "last 2 versions"
],

edited Jun 18 '18 at 08:28

Capricorn

2,061
5
24
31

answered Jun 18 '18 at 08:10

dlemm

61
1
5

score 2 · Answer 4 · answered Apr 12 '18 at 09:21

2

Try edit like this

webpack.config.js:

{
            test: /\.scss$/,
            use: [
                "style-loader", "css-loader", 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap'
            ]
        },

postcss.config.js:

require('autoprefixer')({browsers: ['last 10 versions']}),

answered Apr 12 '18 at 09:21

胡亚雄

2,161
1
19
21

When change the browsers versions from `defaults` to any other option things appear to be working – doublea Apr 13 '18 at 15:52

Webpack 4, postcss-loader and autoprefixer plugin

4 Answers4

Linked