Vite unable to load CSS file located in public directory

I've got the following project:

├── README.md
├── dist
│   ├── components
│   │   ├── checkbox.css
│   │   └── input.css
│   ├── styles.css
│   └── styles.js
├── docs
│   ├── index.html
│   ├── main.css
│   ├── package.json
│   ├── tailwind.config.js
│   ├── vite.config.js
│   └── yarn.lock
├── package.json
├── src
│   ├── components
│   │   ├── checkbox.css
│   │   ├── input.css
│   │   ├── postcss.config.js
│   │   └── tailwind.config.js
│   └── index.js
├── visable.yaml
└── yarn.lock

Inside the docs/index.html file I reference two CSS files:

    <link rel="stylesheet" href="./main.css" />
    <link rel="stylesheet" href="../dist/styles.css" />

The main file is loaded, but not the styles.css:

Here's my vite.config:

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    open: "index.html",
  },
  publicDir: "dist",
  root: ".",
});

If you want to use relative paths you can't use /dist folder. By default, /dist acts as the folder holding your entire production build. To better understand this, install http-server and run it inside /dist folder, after you build. It will serve on local exactly what a web server would, on a domain.

When you build the app, it wipes out the contents of /dist folder and re-populates it with all the files needed to run the app in production, gathering and minifying required dependencies.

If you want a particular file to be copied verbatim to /dist folder when building, without it being parsed at all (it's a basic copy), you have to place it in /public folder. You can then reference it in your code by starting the href with / (for the root of /public).

Example: href="/assets/style.css" would reference /public/assets/style.css.

This works in both dev (when serving) and prod (in the deployed app).