Nuxt - Пользовательский значок-шрифт не подается из папки _nuxt - PullRequest
Новая
       52

Nuxt - Пользовательский значок-шрифт не подается из папки _nuxt

0 голосов
/ 23 декабря 2018

Я успешно использовал пакет webfonts-loader для генерации шрифтов и определений классов для значков, но он не обслуживается моим сервером nuxt dev.В моей голове есть тег стиля: 

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

Но запрошенный http://localhost:3010/myfont.woff2 дает 404. У меня это работало в версии nuxt до 2.0 (и до webpack 4), где файл обслуживаетсяот http://localhost:3010/_nuxt/myfont.woff2.Шрифт в настоящее время также подается оттуда, но путь в объявлении font-face указан неверно.Мне интересно, что здесь изменилось, удалив (обязательно?) _nuxt часть в пути.

В моем файле nuxt.config.js у меня есть: 

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

Теперь в соответствии сНапример, в libf для webfonts-loader мне нужно использовать MiniCssExtractPlugin.loader вместо vue-style-loader, но это не работает.Я прочитал здесь , что он используется внутри Nuxt, но я не знаю, как добавить его здесь.

Надеюсь, у кого-нибудь есть идеи, где искать ...

1 Ответ

0 голосов
/ 23 декабря 2018

Хорошо, только что понял: вы должны использовать опцию publicPath пакета webfonts-loader: 

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,
        },
      }
    ],
  })
}

config.output.publicPath - это /_nuxt/.

...