本地字体到 scss 文件的反应

Question

我正在尝试在 scss 文件中导入本地字体，但是当我运行 npm start 时出现以下错误

ERROR in ./src/components/Box/Box.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../fonts/AvenirNext-Bold-01.ttf' in 'C:\Users\evren\rcp\frontend\src\components\Box'

我尝试了不同的解决方案，但无法解决此问题。

这就是我在 scss 中导入本地字体文件的方式

感谢有人可以提供帮助。提前致谢。

Answer 1

我认为您需要检查请求中的 URL。你都尝试了些什么？尝试'./fonts/AvernirNext-Bold-01.ttf' 在我看来，您正在查看组件内部而不是根文件夹。正如您在错误日志中看到的那样，路径是'C:\Users\evren\rcp\frontend\src\components\Box'

我实现这一点的一种方法是添加：
在 scss 文件夹中 > theme.scss

@font-face {
    font-family: "Proxima Nova Light";
    src: url("fonts/Proxima Nova Light.eot");
    src: local("☺"),
    url("fonts/Proxima Nova Light.woff") format("woff"),
    url("fonts/Proxima Nova Light.ttf") format("truetype"),
    url("fonts/Proxima Nova Light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

在您的 app.js 中：

@import "scss/theme.scss";

body {
  font-family: "Proxima Nova Light", sans-serif;
}

最后是字体文件夹 > src/fonts

eot / ttf / woff / svg files go here