Почему слетаю шрифты в Nuxtjs?

Question

[Максим]

в файле подключаю шрифты вот так

@font-face {
  font-family: 'Hagrid';
  font-style: normal;
  font-weight: 400;
  src: local('Hagrid Trial Regular'), url('~/assets/font/Hagrid/Hagrid-Regular-trial.woff') format('woff');
}

при npm run dev все работает и шрифты отоборажаются
но при npm run build все шрифты слетают и не подключаются

nuxt.config.js

build: {
        optimizeCss: false,
        filenames: {
          app: ({ isDev }) => isDev ? '[name].js' : 'js/[contenthash].js',
          chunk: ({ isDev }) => isDev ? '[name].js' : 'js/[contenthash].js',
          css: ({ isDev }) => isDev ? '[name].css' : 'css/[contenthash].css',
          img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
          font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
          video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
        },
        extend(config, ctx) {
          config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/,
            options: {
              fix: true
            }
          })
        },
        loaders: {
          cssModules: {
            modules: {
              localIdentName: "[hash:base64:6]",
            }
          }
        },
        ...(!isDev && {
          html: {
            minify: {
              collapseBooleanAttributes: true,
              decodeEntities: true,
              minifyCSS: true,
              minifyJS: true,
              processConditionalComments: true,
              removeEmptyAttributes: true,
              removeRedundantAttributes: true,
              trimCustomFragments: true,
              useShortDoctype: true
            }
          }
        }),
        splitChunks: {
          layouts: true,
          pages: true,
          commons: true
        },
        optimization: {
          minimize: !isDev
        },
        ...(!isDev && {
          extractCSS: {
            ignoreOrder: true
          }
        }),
        postcss: {
          plugins: {
            ...(!isDev && {
              cssnano: {
                preset: ['advanced', {
                  autoprefixer: false,
                  cssDeclarationSorter: false,
                  zindex: false,
                  discardComments: {
                    removeAll: true
                  }
                }]
              }
            })
          },
          ...(!isDev && {
            preset: {
              browsers: 'cover 99.5%',
              autoprefixer: true
            }
          }),
    
          order: 'cssnanoLast'
        }
      }

Answer 1

[Алексей Ярков]

и такое чувство, что они не подключаются

Чувство - очень плохой помощник разработчика. Открываем DevTools -> Network и смотрим что на самом деле происходит.

Comments

[Максим]

шрифта этого нет

Answer 2

[Константин Величко]

Не верно указан путь до файла шрифта. В CSS указывается просто тильда без слеша
Замените ~/assets/font/Hagrid/Hagrid-Regular-trial.woff на ~assets/font/Hagrid/Hagrid-Regular-trial.woff
https://nuxtjs.org/docs/2.x/directory-structure/as...

Answer 3

[Максим]

была причина вот в этом

plugins: {
        ...(!isDev && {
          cssnano: {
            preset: ['advanced', {
              autoprefixer: false,
              cssDeclarationSorter: false,
              zindex: false,
              discardComments: {
                removeAll: true
              }
            }]
          }
        })
      },