How can I use the public folder in a custom npm package build with Vite?

I have a npm package build with Vue 3/Vite, and I have to put my fonts inside a public asset folder so vite can resolve it at build time. This works fine when I build the story book and then I run npm run build.

My issue is: When I'm using this npm package inside my application, I get 404 errors when the application uses a component from that package. When using the paths in .scss for those fonts, my application doesn't find those folders on my public folder. It should be looking for those fonts inside the npm package, but is not.

This is my path in scss: $r-asset-path: '/assets/'. If I change to './assets/', the build will have the error vite can't resolve it at build time.

Is there a way change this path so it can be dynamic, use '/assets/' on building the package but to not use when I'm using inside an application? I can see the assets folder inside dist on node_modules.

This is my vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require("path")
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'assets': fileURLToPath(new URL('./assets', import.meta.url)), //trial to see if it works or not
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: @import "@/styles/__main.scss";
},
},
},
build: {
lib: {
entry: path.resolve(__dirname, "src/main.ts"),
name: "ui-vue3",
fileName: (format) => ui-vue3.${format}.js,
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
},
},
assetsInlineLimit: 0
}
})

If there's more code needed please let me know so I can provide it.

Thanks in advance.