CODEWITHSUNDEEP
javascriptreactjswebpack
Mizlul
Mizlul

Reputation: 2280

Can't resolve 'css-loader!autoprefixer-loader'

I am using Webpack 4 and trying to add support for my css for multiple browsers.

For some reason the way I am doing is not working. Anyone knows how do we fix autoprefixer for webpack 4.

This is my webpack.config

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


module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    {
                        loader: 'css-loader!autoprefixer-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                ]
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin('dist', {} ),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "[id].css"
        }),
        autoprefixer,
    ]
};

What I need to write in my css:

body {
    display: flex; 
}

What i want to expect on my css within dist folder:

body {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

Upvotes: 1

Views: 417

Answers (1)

tarun chine
tarun chine

Reputation: 145

According to official documentation 'autoprefixer-loader' is deprecated so that may be the reason it is not working with webpack 4

Use 'postcss-loader' using a config file like 

{
   loader: 'css-loader',

}, {
   loader: 'postcss-loader',
   options: {
      config: {
        path: './tools/postcss.config.js'
      }
   }
}

and in post.config.js mention autoprefixer

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

and mention browser list that you want to support in package.json like "browserslist": [ "> 1%", "last 8 versions" ]

Upvotes: 2

Related Questions