@import 正在更改 angular11 中导入的 scss 文件的 url

编程问答 2022-05-17

问题描述

我正在尝试导入一个 scss 文件，在该文件中我为 font-family 定义了 URL

_global.scss

@font-face {
  font-family: "product_sansregular";
  src: url("../src/assets/fonts/product_sans_regular-webfont.woff2") format("woff2"),url("../src/assets/fonts/product_sans_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HelveticaNeueLT-normal";
  src: url("../src/assets/fonts/HelveticaNeueLTarabic-Bold.woff2")
      format("woff2"),url("../src/assets/fonts/HelveticaNeueLTarabic-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

在styles.scss上我导入了全局样式

styles.scss

// Global Overrides & Added Styles
@import "./assets/scss/global";

但它在编译时出错

Error: ./src/styles.scss
Module build Failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: I:\smartData\juthor\Juthor-Platform-Frontend\assets\scss\_global.scss:108:2: Can't resolve './assets/src/assets/fonts/product_sans_regular-webfont.woff' in 'I:\smartData\juthor\Juthor-Platform-Frontend\src'

  106 | @font-face {
  107 |   font-family: "product_sansregular";
> 108 |   src: url("../../../src/assets/fonts/product_sans_regular-webfont.woff2")
      |  ^
  109 |       format("woff2"),110 |     url("../src/assets/fonts/product_sans_regular-webfont.woff") format("woff");

    at Object.emitError (I:\smartData\juthor\Juthor-Platform-Frontend\node_modules\webpack\lib\normalModule.js:173:6)
    at Declaration (I:\smartData\juthor\Juthor-Platform-Frontend\node_modules\@angular-devkit\build-angular\src\webpack\plugins\postcss-cli-resources.js:123:28)
    at runMicrotasks (<anonymous>)
    at processticksAndRejections (internal/process/task_queues.js:93:5)
    at async LazyResult.runAsync (I:\smartData\juthor\Juthor-Platform-Frontend\node_modules\postcss\lib\lazy-result.js:375:15)
    at async Object.loader (I:\smartData\juthor\Juthor-Platform-Frontend\node_modules\postcss-loader\dist\index.js:95:14)

如它试图查找的错误所示 无法解析'./assets/src/assets/fonts/product_sans_regular-webfont.woff'

同样适用于 angular 7，但目前，我使用的是 angular 11。如何使其工作？ 字体文件的路径是src/assets/fonts/product_sans_regular-webfont.woff

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular11node-sasssasssass