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

问题描述

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

My sass has has a font.scss file which has the following

@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文件位于同一目录中.例子是；

And the fonts live in the same directory as the sass file. Example being;

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

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

My main scss imports the above fonts.scss.

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

My issue is that a fonts folder created at the root of the directory and not in dist/assets/fonts/ where I need it to be.

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

From researching the issue I found that I can add mix.config.fileLoaderDirs.fonts = 'dist/assets/fonts'; to my webpack.mix.js file. This does pull the fonts into dist/assets/fonts/. But the resulting css is then;

  @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")

Which isn't correct, it needs to be url("/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf")

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

Upon adding mix.setResourceRoot('dist') and then making mix.config.fileLoaderDirs.fonts = '/assets/fonts';. Creates a assets/fonts folder in the root. Again not correct.

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

How can I get the fonts into dist/assets/fonts with the correct css url("/dist/assets/fonts/TT Norms Pro Regular.woff")?

推荐答案

解决了……

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

这篇关于渲染字体的网址错误-Laravel Mix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！