Output one file for each source css file in an entry

[elchicofrommo]

• Operating System:
• Node Version: >6.9.0
• NPM Version:
• webpack Version: > 5
• mini-css-extract-plugin Version: 0.9.0

Feature Proposal

I don't know if this would even be useful for another engineer, but I found I wanted to output all the css required in an entry point as individual files instead of a single merged file. I've done the work locally to make that function so I wanted to ask if it would be an acceptable feature add so I could contribute the work to the codebase.

Feature Use Case

The reason I wanted to be able to do this is that in my build process I have a set of scss files that aren't referenced by any entry point so I made holding file and sucked in all the scss within a context. The problem I had is that the individual files sometimes overwrote each others style choices as they were being developed by other engineers. As a solve I thought it might be nice if I could configure this plug in to spit out individual css files. Now I can have a host of SCSS files that only static html pages are using still be processed by Webpack by writing a single js file that requires all the scss to be processed.

Thoughts?

[alexander-akait]

I don't understand problem, please clarify, you can achieve that using configuration

[elchicofrommo]

That would be great but I haven’t yet figured out how to do that. What configurations cause this to happen? I’ve been reading over the documentation for two days, reading how tos and couldn’t see it which’s is when I decided to make it myself.

[elchicofrommo]

I made a mini project https://github.com/elchicofrommo/minicssextract_e1.git with two scss files, one entry file and trying to get output css file for each source scss file. I've tried multiple combos of optimization settings and nothing I do will generate a file for portfolio.scss and surveyStyle.scss

[elchicofrommo]

I think I figured out how to do what I'm was looking for with a combination of other loaders. Basically using file-loader, extract-loader, css-loader, sass-loader I can extract them all to files and get hot reload of the css. I spent so much time on it :( At least I got a good perspective of the guts of MiniCssExtractPlugin. Question for you since you already responded. How would i go about minifying the output with the set up I mentioned?

[alexander-akait]

@elchicofrommo I don’t understand at all what you want to do, the link provided does not work, please state everything point by point, you don’t need to write a lot of text in the mix from questions and reasoning, I can’t understand you

[alexander-akait]

• extracting https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry, you can write any test value, based on you ideas
• minimizing - https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production

[elchicofrommo]

The link was you could clone the repo and look. It is here https://github.com/elchicofrommo/minicssextract_e1 . You can see in the project I have two scss files and one js files. I want to extract two css files but what I want does not seem possible with this plug in. What I read is you can only get one css file for each js file.

[alexander-akait]

You need pass right configuration to test option for splitChunks, I will look at that in near future and provide example

[busybox11]

Hello, any update on this?