Multiple entry generates multiple CSS, How to merge css?

Webpack.config

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    entry: {
        post: "./post",
        about: "./about"
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
        publicPath: './dist/',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            loader: 'babel',
            query: {
                presets: ['es2015']
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        }, {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
        }]
    },
    plugins: [
        new ExtractTextPlugin("app.css", {
            allChunks: true
        })
    ]
};
module.exports = config;

post.js

require('./post.css');

post.css

.post {
    width: 100px;
    height: 100px;
}

about.js

require('./about.css');

about.css

.about {
    font-size: 12px;
}

I use ExtractTextPlugin, Now generates app.css

.post {
    width: 100px;
    height: 100px;
}

Looks only post.css,how can i merge about.css and post.css
Like this

.about {
    font-size: 12px;
}
.post {
    width: 100px;
    height: 100px;
}

Author: Fantashit

1 thought on “Multiple entry generates multiple CSS, How to merge css?

  1. This works to create multiple files with the correct (entry-based) names. What I’d like to do (and maybe the OP too?) is create one chunk from all the css.

    new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}) would work if I wanted all chunks merged but I only want the css chunks merged.

    So it would seems this could be solved with either:

    1. A way to add a plugin targeting a specific file type (regex?)
    2. A way to merge extracted text (by extract id?)

    Any ideas thoughts would be appreciated 😄

Comments are closed.