
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" />
からちゃんと読み込めている)
昔の仕様なのかな...