Add example with-scoped-stylesheets-and-postcss

[thomaslindstrom]

🤡

[davibe]

Unless I am misunderstanding something this is basically the same as my example with-global-stylesheet. Even if slighty different the technique is the same so maybe it would make better sense to merge the efforts making one single good example OR moving loaders inside next.js itself. Examples are already very crowded.

[thomaslindstrom]

@davibe Hey, sorry, yes. I copied your with-global-stylesheet, but forgot to attribute you in the README.md. I don't know about merging the examples – I personally found them to lack in the fact that none really solved my problem, so I made this one: More specific examples are better than a few general ones, IMO.

I think your example is useful for someone who don't want postcss with css-modules, but wants to use sass instead.

I'll definitely add an attribution, though.

[thomaslindstrom]

I don't know why the tests keep failing... They all pass locally, for me, and this PR shouldn't affect anything.

[timneutkens]

@thomaslindstrom from the looks of it, it has nothing to do with your PR.

[thomaslindstrom]

@timneutkens Yeah, no, it finally passed now!

[davibe]

Thank you, I was not looking for attribution. I am just saying its redundant to have 2 examples of the same technique. I picked a generic name "*-global-stylesheet" to intentionally accomodate multiple engines. Anyway, its just my point of view.

[thomaslindstrom]

It was out of courtesy.

I see where you're coming from, but I disagree. “I don't have the time to set up my own build configurations and figure out how everything works.” This is the beauty of next.js – everything should just work out of the box. And, when it doesn't, I think there should be examples that fit your use case almost perfectly.

[rauchg]

I personally like this example a lot. It's ok to err on more examples rather than fewer, provided they have good explanations, they work and we maintain them.

I would love to get rid of the "known bug" though :\

[thomaslindstrom]

@rauchg Yeah, me too... I am not sure where it comes from, but I assumed it had something to do with #544 and #627 (comment), and the fact that webpack, AFAIK, is ran from within next inside node_modules (some path stuff going on here?).

Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css'

I'm not even sure what module it has trouble finding. It could be that it doesn't find ../global.css. Could this be fixed by adding some config into webpack that sets some kind of directory context?

[davibe]

Can we have consistent naming so that the two examples are shown close together ? I refer to with-(global|external)-stylesheet*. I vote for global because it is better opposes to scoped

[thomaslindstrom]

Could probably rename this to with-scoped-stylesheets-and-postcss?

[thomaslindstrom]

I changed the name of the example to with-scoped-stylesheets-and-postcss. It still fails due to some random error, though.

[timneutkens]

It's not from this PR @thomaslindstrom, so that's fine. I merged it in, could you create an issue for the known bug with steps to reproduce? ❤️

[thomaslindstrom]

#1191 😘