I have a file structure problem in Vite, please help!

[muted summit]

Hey guys, so I searched heavily and extensively on every single forum page and Stack Overflow, nothing.

I am facing the issue where my @font-face, attribute url() is not working as intended.

When I build the application using npm run build Vite compiles my css code and my css code that is built for production **can't locate .ttf (font file I am self-hosting) .

The reason why my production code, my css is not reading the .ttf is because instead of compliling src: url(../fonts/Mont.ttf) he compiles src: url(./fonts/Mont.ttf)

Quite literarly, one dot is preventing me from having a correct production code. I will attach my config relating to this and my file structure.

output: {
assetFileNames: ({name}) => {  
              if (/\.ttf$/.test(name ?? '')) {
                    return 'assets/fonts/[name][extname]'
                    }
 }```

---- Production
--- Assets
--fonts
-montserrat.tft
--styles
-index.css
--scripts
---index.html

this index.css points to the ./fonts/montserrat.tft, giving me the not found

instead of pointing to ../fonts/montserrat.tft

[merry ferry]

can you possibly post your dev css? like the @fontface part (not the entire file)? also what does your dev file directory look like? You gave the production directory structure but the dev structure is arguably more important considering vite automatically resolves the imports

[muted summit]

--- Dev
-- Fonts
-montserat.ttf
--Styles
-main.scss <---- inside of here goes the @font-face
--Scripts
- main.js (@import '../styles/main.scss)

      --index.html

@font-face {
font-family: 'Monty Regular';
url(../Fonts/montserrat.ttf);
}