自動的に生成されるCSSのファイル名がおかしい問題
vite + Reactでtodoアプリを作成したさいに発生した問題です。
ローカルでは問題なくCSSが適応されているが、ghactionでは適応されていないのが問題でした。
問題の部分
dist/assets/.cssB7eOPUfC
上記のように謎のファイル形式名になっている。
VScodeでは、CSSと認識されている。
しかし、ghactionでは認識できず適応されていない。
解決策
[hash].cssにする。
vite.config.ts
cssCodeSplit: true,
assetFileNames: "assets/[hash].css",
原因
デフォルトの状態は以下です。
vite.config.ts
assetFileNames:
"assets/[name]-[hash][extname]",
[name]が.cssにあたり、
[hash]がB7eOPUfCにあたります。