Multiple entry generates multiple CSS, How to merge css?
See original GitHub issueWebpack.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:
- Created 7 years ago
- Comments:5 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
Any ideas thoughts would be appreciated 😄
@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.