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

[bebraw]

@krazi3 You are right. This is more of a documentation issue. Tagged accordingly.

[samithaf]

@bebraw @Findiglay I try out your solution and and thanks for posting. But Still web pack creates multiple css bundles.

[bebraw]

@samithaf Can you open a separate issue with a link to to your project source in it? There is not enough info to debug.

[samithaf]

@bebraw please have a look on the sample project. https://github.com/samithaf/webpack-code-split Also I wonder it's required to create another issue for it since it's the same issue.

[jtefera]

If anyone is interested, I ended up creating a plugin for this purpose:
https://github.com/jtefera/merge-files-webpack
The plugin is kind of simple so if you see there is something lacking, create an issue!

[bebraw]

@jtefera Nice work. Please publish to npm.

Time to close this issue.

[jtefera]

Is already in npm!

npm install merge-text-webpack-plugin --save-dev

[bebraw]

@jtefera Ok, cool. Just got confused by the repo name (didn't match package name). Nice. 👍

[softvar]

Got it working.

Install dev-dependecies

npm i extract-text-webpack-plugin --save-dev
npm i css-loader --save-dev

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractCSS = new ExtractTextPlugin('bundle.min.css')

module.exports = {
  entry: {
    'bundle.min.css': [
      __dirname + '/src/styles/abc.css',
      __dirname + '/src/styles/xyz.css',
      __dirname + '/src/styles/mno.css'
    ]
  },
  devtool: '',
  output: {
    path: __dirname + '/dist/styles/',
    filename: '[name]'

  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: extractCSS.extract({
          use: {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        })
    }]
  },
  resolve: {
    alias: {},
    modules: [],
    extensions: ['.css']
  },
  plugins: [
    extractCSS
  ]
};

bundle.min.css will get generated. Based on minimize: true/false, minification will be decided. Enjoy!