Webpack4 cannot extract scss common module

< H2 > first of all, it is tested that there is no problem with extracting the common module of css. The configuration is as follows: < / H2 >
    optimization: {
        splitChunks: {
            cacheGroups: {
                // 2Css/Js
                common: {
                    name: "common",
                    chunks: "all",
                    minChunks: 2, // 
                    minSize: 0 // 30000
                }
            }
        }
    }  
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../" // cssurl
                        }
                    },
                    "css-loader",
                ]
            },
   plugins: [
        new CleanWebpackPlugin(["dist"])
        new MiniCssExtractPlugin({
            filename: "css/[name].css", // css
            chunkFilename: "css/[name].css" // css
        })
    ]
index.css and about.css are introduced into the index.js and about.js entrances
, respectively.

index.css

@import "css-common.css";
.box-1{...}

about.css

@import "css-common.css";
.box-2{...}
three index.css,about.css,common.css files are generated by packaging
< hr > < H2 > then replace all css with scss to load < / H2 >
            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }
splitChunks and plugins remain unchanged, index.scss and about.scss are introduced in index.js and about.js respectively

index.scss

@import "css-common.scss";
box-1{...}

about.scss

@import "css-common.scss";
box-2{...}
only two files, index.css and about.css, are generated after packaging, common is not extracted, and both css contain duplicate css-common.scss
< H2 > what"s going on with solving this? Thank you for your answers < / H2 >
Oct.29,2021

your public scss should have been disposed of by sass-loader , so for webpack, those two are separate


optimize-css-assets-webpack-plugin

clipboard.png

Menu