Include fonts and assets when building a Vue component library

user_10818714 0
Viewed 480

Right now I'm using vue-cli-service build --target lib --name myLib [entry] to build Vue as a component library to use in other projects.

However, it only generates four files which are:

dist/myLib.umd.min.js 
dist/myLib.umd.js
dist/myLib.common.js
dist/myLib.css

It doesn't have any assets/ folder which I store fonts in the dist/ folder.

What parameters or configurations do I have to make to be able to embed the fonts with the library?

vuejs2 vue.js webpack build javascript
2 Answers

Im having the same issue. It would be helpful if i get some insight on how to bundle libary with fonts and images

user_58273760

Well, what is working for me is setting the following config to my 'vue.config.js'file:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: './',
  css: {
    extract: false,
    sourceMap: true,
  }
})

That makes the CSS (with the @font-face) go to the 'XXXX.common.js', in my case, the font file was exported to '/dist/fonts'

user_159214490
Related