CSS for $error.svelte not built, not applied

[tacone]

Describe the bug
When building for production, the error page will show without any styling.

Logs

$ svelte-kit build
vite v2.1.5 building for production...
transforming...
✓ 44 modules transformed.
rendering chunks...
.svelte/output/client/_app/manifest.json                            0.93kb
.svelte/output/client/_app/pages/index.svelte-8aa39352.js           1.17kb / brotli: 0.53kb
.svelte/output/client/_app/chunks/vendor-63a63977.js                5.26kb / brotli: 2.06kb
.svelte/output/client/_app/assets/pages/index.svelte-608e5fe0.css   0.34kb / brotli: 0.15kb
.svelte/output/client/_app/start-ba42d67b.js                        16.15kb / brotli: 5.52kb
.svelte/output/client/_app/assets/start-80eb6749.css                92.00kb / brotli: 10.26kb
.svelte/output/client/_app/pages/results.svelte-05269c80.js         83.70kb / brotli: 24.17kb
vite v2.1.5 building SSR bundle for production...
transforming...
✓ 19 modules transformed.
rendering chunks...
.svelte/output/server/app.js   185.25kb

Run npm start to try your app locally.

> Using @sveltejs/adapter-node
  ✔ done
Done in 6.73s.

To Reproduce

Here's my $error.svelte:

<script>
	export let status;
	export let error;

	import '../app.scss';
</script>

<h1>{status}</h1>
<p>{error.message}</p>

<style lang="scss">
	h1,
	p {
		font-weight: bold;
		background-color: red !important;
	}
</style>

Nothing is applied, not app.scss nor the rules in the style tag.

Expected behavior
When building for production, the 404 page should be styled.

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

$ npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers
npx: installed 1 in 1.207s

  System:
    OS: Linux 5.8 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 3.05 GB / 31.28 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/bin/node
    Yarn: 1.22.10 - ~/.npm-packages/bin/yarn
    npm: 6.14.10 - /usr/bin/npm
  Browsers:
    Chromium: 89.0.4389.114
    Firefox: 84.0.2

• Firefox 84.0.2 (64-bit) / Linux
• Node Adapter

Severity
I'd say it's ok while sveltekit is in beta, but it should be fixed before stable. I think it may hinder adoption.

[jcbcn]

Seeing the same thing with tailwindcss. Works fine on npm run dev but with npm run build there's no styling at all. I can't see anything that would have caused it to stop working on my side.

EDIT: When I have ssr: true it works. When it's false no styles get loaded. I'll raise a seperate issue.

[dsegovia90]

I have the same issue. No styles in $error page on first load, but if I send a user there via endpoint or load function like so return { error: new Error('Referrer not found.'), status: 404, }
the page does load with it's CSS.

[borntofrappe]

It seems the issue was fixed when $error.svelte was updated to add support for nested error components #901.

I can replicate the problem with version @1.0.0-next.71. but not with with version @1.0.0-next.72

npm install @sveltejs/kit@1.0.0-next.72

Updating the library to a more recent version should work.

[tacone]

Tried it yesterday evening and I confirm it works. Closing the issue.