Handling CSS with webpack

[maxmilton]

Currently CSS processing is rather rudimentary; static global CSS in the assets dir and svelte component CSS included in JS bundles. That's all well and good for a demo or PoC but the reality is production sites need more flexibility, repeatability, and automation.

Since we're using webpack for bundling, it should also be set up to handle generating CSS file/s. A link to the file/s should also be injected into the page template.

Using css-loader + style-loader/mini-css-extract-plugin is probably all we need for most projects to get started. This is easy to set up but now we also need to add a <link rel=stylesheet> to the head which doesn't automatically happen. In other webpack projects I would use html-webpack-plugin but that seems like overkill when sapper is already handling template.html.

So, what we need for this is:

1. Change webpack client config: sevelte to pass CSS to webpack + handle CSS via webpack loaders.
2. Provide a way to inject CSS file/s via a <link>.

For reference, here's what I'm using in one of my new projects, which covers 1. It also uses postcss but that's not necessary for sapper-template.

[ratson]

I am trying out sapper, immediate findglobal.css is static and not minified after build. A workaround would be having separate build step for it, but is there a more elegant way?

[gavinmcfarland]

Experienced similar situation when I was importing variables into global.css. For ease I ended up creating a wrapper component and putting all the contents of global.css into it which all other components are used inside of.

[LockeAG]

yep, I'm working in some combination like with https://github.com/DreamsEngine/base-engine-ts or https://github.com/bstaruk/starbase , but I haven't had much time, I will try maybe next week