Subscribe on changes!

path error during build

avatar
May 4th 2020

I'm using font face like that:

@font-face {
  font-family: "myfont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
}

It is work as expected on dev. But production build fails.

[Error: ENOENT: no such file or directory, open 'C:\fonts\myfont.woff2'] { errno: -4058, code: 'PLUGIN_ERROR', syscall: 'open', path: 'C:\fonts\myfont.woff2', pluginCode: 'ENOENT', plugin: 'vite:css', hook: 'transform', id: 'C:\Users\sib\Desktop\dev\vitetailwind\tailwind.css', watchFiles: [ 'C:\Users\sib\Desktop\dev\vitetailwind\index.html', 'C:\Users\sib\Desktop\dev\vitetailwind\node_modules\vue\dist\vue.runtime.esm-bundler.js', 'C:\Users\sib\Desktop\dev\vitetailwind\App.vue', 'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=script&lang.js', 'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=template&id=add54c12', 'C:\Users\sib\Desktop\dev\vitetailwind\App.vue?vue&type=style&index=0&lang=postcss.css', 'C:\Users\sib\Desktop\dev\vitetailwind\tailwind.css' ]

avatar
May 4th 2020

try using fonts/ instead of /fonts/

avatar
May 4th 2020

Works but sounds like temporal solution.

Also I have another weird issue. My css file and fonts folder before build.

@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2"),
         url("fonts/Inter-Regular.woff") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Italic.woff2") format("woff2"),
         url("fonts/Inter-Italic.woff") format("woff");
  }

image

After build:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/Inter-Regular.04154619.woff2) format("woff2"),
    url(fonts/Inter-Regular.woff) format("woff");
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-Italic.woff2) format("woff2"),
    url(/Inter-Italic.28183427.woff) format("woff");
}

image

Also if there is a question mark on font url build fails:

src: url("fonts/Inter-Italic.woff2?3.13") format("woff2"),
         url("fonts/Inter-Italic.woff?3.13") format("woff");

[Error: ENOENT: no such file or directory, open 'C:\Users\sib\Desktop\dev\vitetailwind\fonts\Inter-Italic.woff?3.13'] {