What style-loaders expects as input?

[ParSal123]

Documentation Is:

• [x] Missing
• [x] Needed
• [ ] Confusing
• [ ] Not Sure?

Please Explain in Detail...

Hi, In the docs, it reads

It's recommended to combine style-loader with the css-loader

but it doesn't say anything about alternatives. I'm trying to learn how this whole webpack pipeline fits together. From what I can tell (based on this, bunch of stackoverflow questions: 1, 2, 3, 4 and probably more) css-loader takes the css files (after everything else like sass, postcss, etc have done their work and right before style-loader) and outputs js which are then given to style-loader. Finally, based on configuration, the output is then javascript which injects the style in DOM. What EXACTLY is style-loader expecting as input? I tried to input css files and it didn't work.

I'm asking this for my own curiosity, but if someone were to actually write another css-loader to work with style-loader, there is no documentation for it.

Your Proposal for Changes

Write documentation!

[alexander-akait]

Pipeline is simple CSS -> JS -> Apply styles to DOM

• css-loader track url()/import and convert it to import ... from ..., also if you use CSS modules your classes will be hashed and exported from generated JS files, css-loader returns array of styles like ['module-name.css', '.class { color: red }', 'source-map'] (there are more fields, just simplified for example)
• style-loader just get exported array and apply them to DOM + add code for hot module reloading, so you don't reload page when you changes styles

In other hard - mini-css-extract-plugin gets array and create CSS files, so you can use <link>, also if you have async CSS plugin generates JS code for loading them

[alexander-akait]

So if you need another logic than apply styles to DOM you can use own loader, but it is rare or specific usage

[ParSal123]

Pipeline is simple CSS -> JS -> Apply styles to DOM

• css-loader track url()/import and convert it to import ... from ..., also if you use CSS modules your classes will be hashed and exported from generated JS files, css-loader returns array of styles like ['module-name.css', '.class { color: red }', 'source-map'] (there are more fields, just simplified for example)
• style-loader just get exported array and apply them to DOM + add code for hot module reloading, so you don't reload page when you changes styles

In other hard - mini-css-extract-plugin gets array and create CSS files, so you can use <link>, also if you have async CSS plugin generates JS code for loading them

Thank you, Still, I think if this could be added to the docs somewhere (like a separate "How it works" section) along with a simple example it would be nice and more understandable.

[nyngwang]

@alexander-akait Is this one added? If so then this can be closed. If not, I can help update the website of webpack later this/next month.

[alexander-akait]

@nyngwang Yeah, feel free to send a PR to our docs, still not documented