Home > Back-end >  Webpack Sass minify and autoprefix
Webpack Sass minify and autoprefix

Time:08-30

Hi I'm trying to configure a webpack to compile my Sass autoprefix it and minify this using webpack,

module.exports = {
    entry: {
        style:'./asset/sass/main.scss',
        //main:['']
    },
    output:{
        path:path.resolve(__dirname,'asset/dist'),
    },
    module: {
        rules: [
            {
                test: /.s?css$/,
                use: 
                [MiniCssExtractPlugin.loader,"css-loader","sass-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                        postcssOptions: {
                            plugins: [
                                [
                                    "autoprefixer"
                                ],
                            ],
                        },
                        },
                    }
                ],
            },
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
            new RemoveEmptyScriptsPlugin(),
            new TerserPlugin()
        ],
    },
    plugins: [new MiniCssExtractPlugin()],
};

I made this config and browserlist default inside my package.json I got no error but no prefix is added even with min-resolution: 192dpi media queries

CodePudding user response:

I just found this

module: {
        rules: [
            {
                test: /.s?css$/,
                use: 
                [MiniCssExtractPlugin.loader,"css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "autoprefixer"
                                    ],
                                ],
                            },
                        },
                    },
                    "sass-loader"
                ],
            },
        ],
    },

And It works!!

  • Related