[SOLVED] Vercel doesn't render CSS for my project. However it works fine locally

Vercel doesn't render CSS for my project. However it works fine locally

I'm deploying a Flask app to Vercel. Locally it works perfectly — static files like CSS load and the page looks as expected. But after deploying to Vercel, the site renders with no CSS,.

The app is supposed to render like this enter image description here

But vercel renders it like this enter image description here

The console shows: GET https://cooking-assistant-phi.vercel.app/static/css/style.css net::ERR_ABORTED 404 (Not Found)

The repository: https://github.com/kayvour/cooking-assistant

I tried common fixes like changing paths but nothing worked, maybe the issue could be with vercel.json? {

  "version": 2,
  "builds": [
    {
      "src": "app.py",
      "use": "@vercel/python"
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "app.py"
    }
  ]
}

Solution

I think it's dest parameter, since it's trying to access the absolute path instead of the relative one. You are telling Vercel to look for an absolute path /<project>/static/..., which does not exist in the deployed filesystem. Instead, try change "dest" to omit the initial slash:

"dest": "static/$1"