Multiple entry generates multiple CSS， How to merge css？

[QzhouZ]

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 ,post.css to app.css
Like this app.css

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

webpack: 1.13.0
extract-text-webpack-plugin: 1.0.1

[rbalicki2]

👍 this is confusing me as well!
FWIW #39 this answers the question I think

[cwagner22]

+1, have you been able to fix it? I want to merge my extracted css and sass files...

[andreevWork]

+1, because webpack take last css chunk and just write him into final css file, dont merge. How merge all chunks?

[eliseumds]

+1 Would be really helpful. I'm currently generating a bootstrap.css (from bootstrap-loader) and another app.css that has Font Awesome styles. It'd be great if they could be together.

[Findiglay]

+1 Trying to figure out how to do this also.

[Findiglay]

Actually this is creating a single file for me now:

  {
      test: /(\.scss|\.css)$/,
      include: path.resolve(__dirname, 'src/styles'),
      loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
    },
   {
      test: /(\.scss|\.css)$/,
      exclude: path.resolve(__dirname, 'src/styles'),
      loader: ExtractTextPlugin.extract('style', 'css sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
   },

and...

plugins: [ new ExtractTextPlugin('[name].[hash].css') ]

[trsh]

This plugin seems very NOT maintained, yet it's very important. +1 for this thread.

[raglan-road]

I just ran into this issue as well, and may have also figured out a way of working around it in the short term.

The relevant snippet of my webpack config looks like this:

    var plugins = [
        [snipped a number of other plugins]
        new ExtractTextPlugin('../css/bundle.css', {
            allChunks: true
        })
    ];

    var entry = {
        [snipped a number of entries]
        // Webpack will stick the chunks of CSS from whichever
        // entry is processed *last* in bundle.css and that's it;
        // it discards all the others.
        // This entry includes all of the components that import css modules, 
        // which forces webpack to include all css in our bundle as 
        // it will be processing *all* chunks *last*.
        'css-bundle': ['foo.jsx', 'bar.js', 'baz.jsx']   // <-- last entry in my entries list
    };      

By having the last entry in the config include all modules that import CSS (foo.jsx, bar.js, and baz.jsx in this example), webpack-extract-text-plugin will include all of the CSS they need as this entry is the last entry that it processes. As long as this entry is last and is kept up-to-date (which is, of course, a pain point), the CSS chunks that webpack-extract-text-plugin generates should be concatenated together and bundled.

Also, if anyone needs it, here is my loader (which includes SASS and PostCSS processing):

PROD
ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!postcss-loader!sass')

DEV
ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!sass?sourceMap!postcss-loader?pack=dev')

[chbdetta]

+1 Any suggestion on solving this?

[bebraw]

I think you might need a post-process plugin for this. If someone is interested, I've done something similar at purify plugin. You'll need to dig out the emitted CSS and concat as you want.

[krazi3]

@Findiglay Your solution helped me. Thanks