css/sass Vite equivalent for font-url

[judocode]

Greetings!

I'm currently converting from webpacker to Vite and I am loving it so far! I am getting hung up on one portion of it which is finding what the equivalent to referencing a font with font-url in a sass file is. Here is my current setup:

Currently, I have fonts in the app/assets/fonts folder, such as:

app
|
-- assets
      |
      -- fonts
           |
           -- graphik
                |
                -- Graphik-Medium-Web.woff2

And in my app/assets/stylesheets/application.scss file, I can reference the font with: font-url('graphik/Graphik-Medium-Web.woff2').

However, this does not work when I am using Vite. I see a request made for the font in the network tab as http://localhost:8080/assets/graphik/Graphik-Medium-Web-[digest].woff2, but the reference in the application.scss in the network tab is still the original font-url('graphik/Graphik-Medium-Web.woff2').

I have tried to add the assets paths in config/vite.json by adding:

"watchAdditionalPaths": [
    "app/assets/**/*"
]

But that didn't seem to help either.

Am I missing some sort of configuration setting to get this all hooked up with vite_ruby?

Thanks!

[ElMassimo]

To minimize the amount of watched files, the root for Vite is your sourceCodeDir.

You can still import or reference files outside the source dir, and adding them to watchAdditionalPaths ensures Vite Ruby will trigger a build if any of those files change.

The part that's missing in your example, is that you need either a relative reference (error-prone) or an absolute reference.

It's recommended that you configure a custom alias (such as @assets), and use that in your .scss file.

url('@assets/fonts/graphik/Graphik-Medium-Web.woff2')

[judocode]

@ElMassimo Awesome, works perfect, thanks for your quick response and the work you are doing on this awesome project 🙌