[Question] CSS / Sass Support

[dariobanfi]

Hi!

Thanks for the nice example, I like the simplicity.
How would you support importing css files with this though? Since ts-node starts directly the typescript server, it will fail to import the css file.
Any simple solution to this?

[hiroppy]

I don't assume CSS support in this sample because this sample uses styled-components.

If you want to use CSS on the server side, you need to build codes with webpack once.

[dariobanfi]

Thanks - I was just curious how would you have done it in case you needed that.
I manage to do it multi-compiling client and server with webpack.

[kahurangitama]

If you want to use CSS on the server side, you need to build codes with webpack once.
Hi @hiroppy, first of all I would thank you for such a great SSR setup! It's truly awesome work you have done!

I met the same problem with styles.
Could you explain how I can use:

import './App.scss';

When I compile it with npm run build:client webpack output is in ./dist/client, there is a lot of hashed styles separated in chunks. That's ok. But, npm run build:server will produce only code in /dist/server/client without styles at all. And the line above compiled to:

require('./App.scss');

Which is not found. Could you provide a config or steps how to achieve this , please.
I suggest to install @loadable/webpack-plugin and @loadable/babel-plugin... but still no luck ... maybe you have time to explain this a bit more and point me in right direction.
Thank you in advance

[hiroppy]

@kahurangitama This example uses just styled-components, so I use just tsc.

FYI: https://github.com/hiroppy/ssr-sample/blob/master/package.json#L13

If you want to use sass, please use webpack at server compile like client code.
https://github.com/hiroppy/ssr-sample/blob/master/package.json#L14

This issue is unrelated to loadable-components.

[kahurangitama]

Figure it out by changing the start script:
"start": "cross-env TS_NODE_FILES=true ts-node -r ignore-styles -r tsconfig-paths/register ./src/server/index.ts",

Somehow if I wrote the same: require('ignore-styles') in index.ts it wasn't picked up

[hiroppy]

Sorry but I don't know your situation, so could submit the minimum reproducible repo?