webpack提取sass的公共样式

Question

webpack打包多页面,每一个页面都有一个单独的scss文件 然后这每一个单独的scss文件都需要引入一个公用样式文件scss

webpack打包的出来的css文件都引入的公用base.scss样式文件都直接打包进来了。左边为index.css右边为pagea.css

我的需求就是能够把多次引入的base.scss 单独打包成一个common.css文件

这是生产模式下的sass处理plugin

    new HappyPack({
        id: 'css',
        verbose: true,
        threadPool: happyThreadPool,
        loaders: [
            {loader: 'css-loader', options: {importLoaders: 1, minimize: true}},
            {loader: 'postcss-loader'},
            {loader:'sass-loader'}
        ]

    }),


    /*加载把css文件单独分离出来的插件*/
    new ExtractTextPlugin({
        filename: (getPath) => {
            return getPath('css/[name]-[contenthash:6].css').replace('css/js', 'css');
            /* [name] 根据html名字获取的css名字  contenthash:6加上hash:6值*/
        },
        allChunks: true
    }),

Answer 1

建议把公共样式提取到单独的文件中,在js引入,通过splitChunks或者异步引入,使其单独生成文件
scss中引入公共的mixins,变量等