Custom Webpack Config warning in README

[jthegedus]

• I have searched the issues of this repository and believe that this is not a duplicate.

Although #3265 raises this point too, but does not focus on it as the problem to address.

Expected Behavior

The README specifies

Warning: Adding loaders to support new file types (css, less, svg, etc.) is not recommended because only the client code gets bundled via webpack and thus it won't work on the initial server rendering

However many of the repo's examples rely on custom webpack configurations and loaders to produce their desired outcomes.

Eg: with-global-stylesheet requires a bunch of loaders use: ['babel-loader', 'raw-loader', 'postcss-loader'] to compile and output the files into the dist dir.

Then, in my journey for external global and scoped scss -> css configuration/pipeline I came across this thread.

@giuseppeg #2413 (comment)

It seems that in the example webpack is doing the magic, but if it would be very cool if that works for ssr too. Have you also tried without the global property on the style tag?

@timneutkens #2413 (comment)

This is really cool 😲

giuseppeg again - #2413 (comment)

Alright @mocheng it works indeed!

These comments in this thread have me confused about this Webpack warning.

Context

Ultimately what I would like to understand is the following:

1. what are the implications of having Webpack configurations? Can the usage of Babel and Webpack in SSR and client-side be made more clear?
2. can we have more guidelines around the examples to make them more easily composed? Eg: with-jest does not play nice with any examples that rely on custom Webpack, specifically any styling examples.

[giuseppeg]

AFAIK Webpack only runs for client side code. If you want to use SASS and external css (styled-jsx external files are JS modules) then you can use the styled-jsx-plugin-sass. If you want to use actual .scss files try https://github.com/coox/styled-jsx-css-loader out

[jthegedus]

Thanks for the quick response. I have tried your suggestions out with some success. I wanted to create this issue to separate it from the styling discussions going on elsewhere, and wish to focus more on the usage of Webpack throughout the example projects as it's not quite clear it works as the warning in the README states.

EDIT: @giuseppeg I have linked to separate issue for my actual styling problems.