question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple entry generates multiple CSS, How to merge css?

See original GitHub issue

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;
}

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
cpsubriancommented, Jun 17, 2016

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 😄

1reaction
e-e-ecommented, Apr 5, 2018

@montogeek I am not sure if the issue template was the same as when this was first raised - but looking at opening a new issue for this, it seems like it would be closed immediately as its not really a feature request or a bug, but a question.

Read more comments on GitHub >

github_iconTop Results From Across the Web

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 ...
Read more >
How to merge multiple CSS rules from duplicated selectors?
CSSO (Github project) is the tool will help you merge identical CSS classes. It can be configured to execute some cleaning, compaction and...
Read more >
Grouping Multiple CSS Selectors in One Style Property
Learn how grouping CSS selectors simplifies your stylesheets and allows you to style multiple elements without needing additional attributes.
Read more >
How to combine multiple css files into one using a build tool?
I have a simple css project with structure like this main.css layout.css colors.css theme.css in main.css I import like this @import ...
Read more >
HTML Styles CSS - W3Schools
CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS = Styles and Colors....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found