Can't resolve '../fonts/Material-Design-Iconic-Font.ttf' - error on first run

[darkylmnx]

[Core]
    onsenui 2.2.8

[Framework]
    vue 2.5.2

[Framework binding]
    vue-onsenui 2.4.2

[Platform]
    Desktop - Windows 10

[Browser]
    Desktop - Chrome 55.0.2883.75

Encountered problem

How to reproduce just do a vue init webpack your-project and install onsen via npm then import and run the project

[badpunman]

disable postcss from build.

[frandiox]

@darkylmnx You need to configure font loaders in Webpack. There are templates with this done for you: vue init OnsenUI/vue-cordova-webpack or vue init OnsenUI/vue-pwa-webpack. You can use one of them or just check how they are configured.

[badpunman]

@frandiox Actually the difference between these templates is not related to font loaders at all. I struggled trying to figure out what was different between vue-webpack and onsenui templates earlier. It boils down to PostCss being disabled in the onsenui templates. The PostCss breaks relative font imports in some way.

[frandiox]

@badpunman Oh, I see. Looks like they added Postcss loader in recent updates. I was confused with a different issue, I remember I had to add something like this to the templates to make the icons work on Cordova.

In any case, looks like a resolving issue. It's probably fixable by changing some configuration in postcss-loader...

[darkylmnx]

weird that postcss use is breaking this, how can i use postcss then if i need it ?

[badpunman]

Don't know.

Sass libraries I've used provide a way to declare a sass-variable for absolute font-paths before importing. Not a case here though.