Sass 加载器无法使用 Encore webpack 和 Symfony 5 加载 url

Posted 2023-02-22

【中文标题】Sass 加载器无法使用 Encore webpack 和 Symfony 5 加载 url

【英文标题】：Sass loader can't load url with Encore webpack and Symfony 5

【发布时间】：2021-06-02 00:35:18

【问题描述】：

我更新了 Encore webpack 及其依赖项。因为，我有这个错误：

错误：无法解决 '/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff' 在 'E:\Projets web\Roadtripr\roadtripr\assets\css' 在runMicrotasks()

字体文件位于public/fonts 目录中。

编辑：

有@font-face 声明：

/* Basier */
@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;

@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;

@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-medium-webfont/basiercircle-medium-webfont.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;

@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-semibold-webfont/basiercircle-semibold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-semibold-webfont/basiercircle-semibold-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;

@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;

@font-face 
  font-family: 'Basier';
  src: url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff') format('woff'),
       url('/fonts/Basier-Circle-bold-webfont/basiercircle-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;

【问题讨论】：

错误：无法解析 'E:​​\Projets web\Roadtripr\roadtripr\assets\css' 中的 '/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2'在 runMicrotasks ()

【参考方案1】：

将您的字体文件放入：

/assets/fonts/your-font.ttf

然后进入 /assets/scss/your-style.scss:

@font-face
    font-family : 'your-font';
    src : url('../fonts/your-font.ttf') format('truetype');

webpack 将完成这项工作

【参考方案2】：

可能有点晚了 但我遇到了同样的问题并通过将字体文件移动到 assets/css 文件夹（与您的 CSS 文件相同的文件夹）来修复它 并将 CSS 文件中的路径从 url ("/fonts/....") 更改为 url ("nameoffolder")

【参考方案3】：

不要将您的字体文件放在您的public 目录中。

将它们放入assets/fonts。画出这样的画面：

E:\Projets web\Roadtripr\roadtripr
|- bin/
|- config/
|- assets/
|    |- css/
|    |- fonts/
|- src/
|- public/

When you run `yarn encore` the file fonts referenced by `url()` declarations will be copied to your `public/build` directory automatically.

【讨论】：

非常感谢您的帮助。我将文件夹“fonts”从“public”移动到“asset”。我运行了 Encore webpack：文件被复制到 public/build。但是，我总是遇到同样的错误。

对不起，我犯了一个错误。启动 Encore webpack 时文件未复制到 public/build/fonts

我修改了 Encore webpack 配置文件，现在文件已正确复制到 public/build/fonts 文件夹。但是，我总是有同样的错误。

是的，有些东西没有加起来。不过，我在问题下面问了其他问题。

抱歉，我没有看到这个问题。据我说，控制台给了我遇到的第一个错误，但所有行都必须相同。