Vite.Config.Js and import Issues

Maybe specific to me/my abilities, but struggling importing some things with control access via vite.config.js.

I am trying to import from public folder,
@import "../../public/assets/fonts/gordita/stylesheet.css";
@import "../../public/assets/fonts/bootstrap-icons-1.11.1/font/bootstrap-icons.css";
@import "../../public/assets/fonts/font-awesome-6.4.2/css/all.css";
@import "../../public/assets/scss/style.scss";

Heres the vite config:
import { defineConfig } from 'vite';

export default defineConfig({
server: {
fs: {
allow: ['.']
},
},
})

/// <reference types="vite/client" />

but still getting error: [ Client!] The request url "X" is outside of Vite serving allow list.

I have exhausted every resource trying to get this to work and wondering if its to do with Wasp or just myself. Thanks for all the help!