渲染字体的网址错误-Laravel Mix

问题描述

我的sass有一个font.scss文件，其中包含以下内容

@font-face {
  font-weight: 400;
  font-style: normal;
  font-family: "TT norms Pro Regular";
  src: local("TT norms Pro Regular"),url("TT norms Pro Regular.woff") format("woff");
  }

字体与sass文件位于同一目录中。例子是

  /05_fonts
   - fonts.scss
   - TT norms Pro Regular.woff

我的主要scss导入了上述fonts.scss。

我的问题是在目录的根目录而不是在我需要的dist/assets/fonts/中创建了一个字体文件夹。

通过研究该问题，我发现可以将mix.config.fileLoaderDirs.fonts = 'dist/assets/fonts';添加到我的webpack.mix.js文件中。确实会将字体拖入dist/assets/fonts/中。但是结果就是css了；

  @font-face {
    font-weight: 400;
    font-style: normal;
    font-family: "TT norms Pro Regular";
    src: local("TT norms Pro Regular"),url("/dist/assets/fonts/TT norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf") format("woff");
  }

这是不正确的，它必须为url("/assets/fonts/TT norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf")

添加mix.setResourceRoot('dist')，然后添加mix.config.fileLoaderDirs.fonts = '/assets/fonts';。在根目录中创建一个assets/fonts文件夹。再次不正确。

如何使用正确的CSS dist/assets/fonts将字体放入url("/dist/assets/fonts/TT norms Pro Regular.woff")中？

解决方法

解决了...

mix.setPublicPath('dist');
mix.setResourceRoot('/');