#1284·webpack

Css font path using relative build path

Author: mrphilipandrewsCreated Feb 1, 2018Updated May 1, 2020
Labelsbug

Ive changed assetsPublicPath to a relative path.

    assetsPublicPath: './',

All works fine except links to font files from css are broken. I've added fonts to my project under /src/assets/fonts/myfont.woff

I've added them to app.vue like so

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/fonts/HelveticaNeue.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

All works fine in dev. In production the font files are emitted to dist/static/fonts/ however within the css file the path is

@font-face {
    font-family: HelveticaNeue;
    src: url(static/fonts/HelveticaNeue.6f58d34.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

Which causes the following path error in in the browser Request URL:http://localhost/dist/static/css/static/fonts/HelveticaNeue.6f58d34.woff Request Method:GET Status Code:404 Not Found

The path in the css should be url(../fonts/

Is there a way to resolve this? Something to do with postcss-url perhaps?