webpack4 无法抽取scss公共模块

Question

首先测试了提取css公共模块没有问题，配置如下：

    optimization: {
        splitChunks: {
            cacheGroups: {
                // 分离引用2次以上的公共Css/Js模块
                common: {
                    name: 'common',
                    chunks: 'all',
                    minChunks: 2, // 最小被引用次数
                    minSize: 0 // 最小体积（默认30000）
                }
            }
        }
    }  

            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../" // 单独配置css文件中url引用路径
                        }
                    },
                    "css-loader",
                ]
            },

   plugins: [
        new CleanWebpackPlugin(['dist'])，
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // 入口文件引用的css输出
            chunkFilename: "css/[name].css" // 非入口文件，如公共css
        })
    ]

在index.js和about.js两个入口分别引入了index.css和about.css

index.css

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

about.css

@import 'css-common.css';
.box-2{...}

打包生成了index.css,about.css,common.css三个文件

---

然后将css全换成scss加载

            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }

splitChunks和plugins不变，在index.js和about.js分别引入了index.scss和about.scss

index.scss

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

about.scss

@import 'css-common.scss';
box-2{...}

打包后只生成了index.css和about.css两个文件，common未被提取，两个css中均包含了重复的css-common.scss中的内容

求解这是怎么回事？拜谢各位解答

Answer 1

你的公用scss应该已经被sass-loader给处理掉了，所以对于webpack来说，那两个是独立的

Answer 2

optimize-css-assets-webpack-plugin