Nuxt - Custom icon-font not served from _nuxt folder

Question

I have successfully used the webfonts-loader package to generate a font and class-definitions for icons, but it isn't served by my nuxt dev server. There is a styletag in my head with:

@font-face {
  font-family: "TopLoggerIcons";
  src: url("/myfont.eot?#iefix") format("embedded-opentype"), url("/myfont.woff2") format("woff2");
}

But the requested http://localhost:3010/myfont.woff2 gives a 404. I had this working in the nuxt version before 2.0 (and before webpack 4), where the file is served from http://localhost:3010/_nuxt/myfont.woff2. The font is currently also served from there, but the path in the font-face declaration is wrong. I'm wondering what has changed here removing the (required?) _nuxt part in the path.

In my nuxt.config.js file I have:

build: {
  extend(config, ctx) {
    config.module.rules.push({
      test: /plugins\/icons\.js$/,
      use: ['vue-style-loader', 'css-loader', 'webfonts-loader'],
    })
  },
}

Now according to the example on the webfonts-loader lib I need to use the MiniCssExtractPlugin.loader instead of the vue-style-loader, but that doesn't work. I read here that it is internally used by nuxt, but i don't know how to add it here.

Hope anyone has an idea where to look...

score 0 · Answer 1 · answered Dec 23 '18 at 09:31

Ok, just figured it out: you have to use the publicPath option of the webfonts-loader package:

extend(config, ctx) {
  config.module.rules.push({
    test: /plugins\/icons\.js$/,
    use: [
      'vue-style-loader',
      'css-loader',
      { 
        loader: 'webfonts-loader',
        options: {
          publicPath: config.output.publicPath,
        },
      }
    ],
  })
}

The config.output.publicPath is /_nuxt/.

Nuxt - Custom icon-font not served from _nuxt folder

1 Answers1