Bad compilation of fonts

[theokoel]

Describe the bug I am developing an application that includes the material-icons icon library. In development mode the icons are interpreted correctly. But once build there is likely to be a path problem during compilation.

I noticed that other people had the same problem with CDN import but on my side I test with the file locally and with css import like this way.

To Reproduce

1. vue create // (Vue3, TS)
2. vue add electron-builder
3. npm i [email protected]
4. import font in main.ts
5. Try in dev / Try in prod

Expected behavior

Visibly when vue compiling the code it sets the font to app:/// . But in reality the application makes them available on app://.

Screenshots

Note: using this import import '@/css/material-icons.css' or this one import '../css/material-icons.css' has no impact on the problem.

Environment (please complete the following information):

• Repo of test with similary probleme: REPO
• vue info:

Environment Info:

 System:
   OS: Windows 10 10.0.22000
   CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
 Binaries:
   Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
   Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
   npm: 8.13.2 - ~\AppData\Roaming\npm\npm.CMD
 Browsers:
   Chrome: Not Found
   Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.47)
 npmPackages:
   @vue/cli-overlay:  5.0.8 
   @vue/cli-plugin-eslint: ~5.0.8 => 5.0.8 
   @vue/cli-plugin-router:  5.0.8 
   @vue/cli-plugin-typescript: ~5.0.8 => 5.0.8 
   @vue/cli-plugin-vuex:  5.0.8 
   @vue/cli-service: ~5.0.8 => 5.0.8 
   @vue/cli-shared-utils:  5.0.8 
   @vue/compiler-core:  3.2.37 
   @vue/compiler-dom:  3.2.37 
   @vue/compiler-sfc:  3.2.37 
   @vue/compiler-ssr:  3.2.37 
   @vue/component-compiler-utils:  3.3.0 
   @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
   @vue/reactivity:  3.2.37 
   @vue/reactivity-transform:  3.2.37 
   @vue/runtime-core:  3.2.37 
   @vue/runtime-dom:  3.2.37 
   @vue/server-renderer:  3.2.37 
   @vue/shared:  3.2.37 
   @vue/web-component-wrapper:  1.3.0 
   eslint-plugin-vue: ^8.7.1 => 8.7.1 
   typescript: ~4.5.5 => 4.5.5 
   vue: ^3.2.37 => 3.2.37 
   vue-cli-plugin-electron-builder: ^3.0.0-alpha.4 => 3.0.0-alpha.4 
   vue-eslint-parser:  8.3.0
   vue-hot-reload-api:  2.3.4
   vue-loader:  17.0.0 (15.10.0)
   vue-style-loader:  4.1.3
   vue-template-es2015-compiler:  1.9.1
 npmGlobalPackages:
   @vue/cli: Not Found

Additional context Is not a problem with the vue-cli-plugin-electron-builder or electron version. I tryed with the default version, it's the same problem.

[klren0312]

try to import in App.vue? My code works

[theokoel]

Thx for your answer, but no change when I importing in the App.vue file (with or without the definition of lang to scss) or in a css file.

After some more research, this issue occurs when the @vue/cli... package is in its last major version >=5.x.x, or then eslint is >=7.x.x.

If I downgrade this couple of packages, it fixe the issues. But I need to use @vue/cli... in >=5.x.x in my project for the dependencies of postcss@8 (for tailwindCSS@3).

Is vue-cli-plugin-electron-builder compatible with @vue/cli...@>=5 (or eslint@=>7) or maybe is not an issues of this package ?

[MatthijsBurgh]

No, this plugin is not yet compatible with Vue CLI 5.X

I have been trying to get it working the past few days. But the tests fail in that case. For example only updating electron/spectron to 17/19 is giving errors, which shouldn't happen. Issues with chromedriver etc. So I am trying to determine what direction to go to update dependencies in small steps.

[megasanjay]

We use Vue CLI 5.x and eslint 8.x

[Happyrain67]

I'm same issue. You can use any fonts with this setting :

package.json : "vue-cli-plugin-electron-builder": "3.0.0-alpha.4",

module.exports = {
  pluginOptions: {
    electronBuilder: {
      ...
      customFileProtocol: './',
    }
  }
}

The customFileProtocol do load fonts with "./fonts/myfont.otf" vs "/fonts/myfont.otf"

If you use the setting "files" dont forgot to add the fonts folder : "/fonts/**/*"

I dont try it with asar, but I imagine that working.

Work with that for me.

[theokoel]

I'm same issue. You can use any fonts with this setting :

package.json : "vue-cli-plugin-electron-builder": "3.0.0-alpha.4",

module.exports = {
  pluginOptions: {
    electronBuilder: {
      ...
      customFileProtocol: './',
    }
  }
}

The customFileProtocol do load fonts with "./fonts/myfont.otf" vs "/fonts/myfont.otf"

If you use the setting "files" dont forgot to add the fonts folder : "/fonts/**/*"

I dont try it with asar, but I imagine that working.

Work with that for me.

Indeed, with the custom parameter customFileProtocol: './', the compilation of fonts is done correctly. Thank you for this solution, it solves this issue while waiting for the package to find a lasting solution.

[loxK]

Same issue:

• Start with a blank project
• npm i @mdi/font,
• load CSS with import "@mdi/font/css/materialdesignicons.css";
• add an icon to HelloWorld.vue (<i class="mdi mdi-alert"></i>)

Icon displays in 'serve' mode but not in builds where fonts failed to load despite being bundled.

@Happyrain67 solution solves it.

[MatthijsBurgh]

Solution can be found here: https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1811#issuecomment-1221618689