CODEWITHSUNDEEP
webpackautoprefixerpostcss-loader
tobiasg
tobiasg

Reputation: 1073

Autoprefixer in Webpack not prefixing

I've put together my first, very simple Webpack config from scratch. In this I would like to bundle JS and also compile, minimize and autoprefix SCSS.

The code looks like this:

webpack.config.js

const path = require('path');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'application.js',
    path: path.resolve(__dirname, 'assets'),
  },
  module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'application.css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

postcss.config.js

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

And in the package.json I've set the following:

"browserslist": [
    "defaults"
  ],

I'm not seeing any prefixing being made, so I'm curious about what I'm doing wrong. Have I missed something?

Upvotes: 0

Views: 2424

Answers (2)

tobiasg
tobiasg

Reputation: 1073

Seems like this was working all along. I was just expecting the "defaults" setting to create more prefixes than it actually did. Changing the setting to "last 2 versions" gave me the expected output.

Upvotes: 1

shubham agrawal
shubham agrawal

Reputation: 57

Make sure that you have installed autoprefixer as an dev-dependency in your project by doing:

npm i autoprefixer -D

and your postcss.config.js should look like this:

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

Upvotes: 1

Related Questions