I'm working on a Vue component library built via VueCLI (and using Storybook Js, Bulma, and Buefy) and I am having issues consuming the CSS downstream. Specifically when I import the CSS file from my package, I am getting Webpack errors with referenced images.

For example, in my upstream src scss files I have a file called "notice-badge.scss" and am referencing background images like so:

.notice-badge img {
    background-image: url('@/assets/img/warning-dark.svg');
} 

and my src directory structure looks like:

my-app/
|--src/
|--assets/
  |--scss/
    |-- notice-badge.scss
  |--img/
    |--warning-dark.svg
  |--fonts/
|--vue-components/

and I build the packages with this command which produces no errors.

vue-cli-service build --target lib --name my-ui-components ./src/index.ts

This outputs my JS, a CSS file, and 2 directories (img and fonts) into my "dist" directory. The images listed in my errors are infact inthere.

So over in another Vue cli app (and later Nuxt) I will be importing the CSS file and Vue components but I am getting a "can't resolve" error on that warning-dark.svg file:

Can't resolve /img/warning-dark.a45b259b.svg in /Users/myname/sites/my-app/ui-components/dist. My package also contains font awesome font files too (a business decision to include this all up stream)

So how can I get my downstream Vue CLI app to resolve the images and fonts referenced inside my node_modules dir?