CSSが適用されない
このサイトは SvelteKit で作っている。
SvelteKit を公式ドキュメントの Getting started に沿って導入すると、おおもとのapp.htmlの<head> </head>内に、
<link rel="icon" href="%svelte.assets%/favicon.png" />
のような記述があったので、static/フォルダを%svelte.assets%で参照でき、グローバルなCSSなどはここに入れるとよいのかなと思って、static/css/style.cssを配置し、おおもとのapp.htmlの<head> </head>内に
<link href="%svelte.assets%/css/style.css" rel="stylesheet" />
を記述してやっていた。
そうすると、ローカルでは例えば
のように表示されてくれるが、これを Netlify にデプロイしてアクセスすると、一部のページで、
のように、CSSが部分的に適用されなかった。
また、これは、routes/直下のページでは起こらず、それより深いところ（routes/posts/以下に各投稿に対応するページを置いているが、それとか）で起こっていた。
スタイルのうち、各Svelteコンポーネント内の<style>タグで指定しているものは反映されていて、グローバルなcssだけがちょうど読み込めていない。
あと、よく見るとfaviconも読み込めていなかった（faviconもstatic/以下に配置している）ので、staticフォルダを読みに行くところができていないみたい。
ソースを見る
ビルド後のサイトのソースを表示させてみると、cssの指定の部分は
<link href="../css/style.css" rel="stylesheet" />
となっていた。パスが../で指定されているので、routes直下のページはうまくいくが、それより深いところのページからはうまく読み込めていない。ローカルでは上手くいくのはなぜ...
svelte.config.jsに加筆
svelte.config.jsに
kit: {
// 略
files: {
assets: 'static',
lib: 'src/lib',
routes: 'src/routes',
template: 'src/app.html'
},
// 略
}
を書き足してみた。
→それでもダメ
%svelte.assets%とは？
そもそも%svelte.assets%の役割がよく分からなかったので、消してみた。
→解決した...（<link href="/css/style.css" rel="stylesheet" />からちゃんと読み込めている）
昔の仕様なのかな...