Estoy trabajando en una biblioteca de componentes de Vue creada a través de VueCLI (y uso Storybook Js, Bulma y Buefy) y tengo problemas para consumir el CSS en sentido descendente. Específicamente, cuando importo el archivo CSS de mi paquete, obtengo errores de Webpack con imágenes a las que se hace referencia.

Por ejemplo, en mis archivos src scss ascendentes, tengo un archivo llamado "notice-badge.scss" y hago referencia a imágenes de fondo de esta manera:

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

y mi estructura de directorios src se ve así:

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

y construyo los paquetes con este comando que no produce errores.

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

Esto genera mi JS, un archivo CSS y 2 directorios (img y fuentes) en mi directorio "dist". Las imágenes enumeradas en mis errores están, de hecho, allí.

Entonces, en otra aplicación Vue cli (y más tarde en Nuxt), importaré el archivo CSS y los componentes de Vue, pero recibo un error de "no se puede resolver" en ese archivo de advertencia-dark.svg:

No se puede resolver /img/warning-dark.a45b259b.svg en /Users/myname/sites/my-app/ui-components/dist . Mi paquete también contiene archivos de fuentes increíbles (una decisión comercial para incluir todo esto en la corriente)

Entonces, ¿cómo puedo hacer que mi aplicación Vue CLI descendente resuelva las imágenes y las fuentes a las que se hace referencia dentro de mi directorio node_modules?