snowpack woff2 字体无法加载

Posted 2023-02-16

【中文标题】snowpack woff2 字体无法加载

【英文标题】：snowpack woff2 font won't load

【发布时间】：2020-12-31 10:36:36

【问题描述】：

snowpack 比 webpack 超级快。 但是我遇到了一些问题，例如当我导入 font-awesome 我的反应项目时它失败了。 导致 snowpack 不会加载字体 (.woff2) 文件。

snowpack 官网没有这个话题。

现在如何解决？

【参考方案1】：

嗯，现在很痛苦。我会解释原因。

理论：

[如果您不使用 PostCSS，请跳到底部] 使用 Snowpack plugin-postcss 和 PostCSS postcss-import 插件。您的 PostCSS 配置可能如下所示：

module.exports = 
  plugins: 
    'postcss-import': ,
    // Other plugins...
  

如果您不想修复所有 @font-face 路径，则您的 CSS 需要位于 css/app.css 之类的子文件夹中，因为 Font Awesome CSS 以相对方式 (../webfonts) 导入字体字体。

@import '@fortawesome/fontawesome-free/css/all.css';

/** Your CSS rules... **/

最后一步，您应该将node_modules/@fortawesome/fontawesome-free/webfonts 目录镜像到构建目标的webfonts 目录中（我的是_dist）。这可以在您的snowpack.config.js 中使用以下代码轻松解决：

"mount": 
  "node_modules/@fortawesome": 
    "url": "/webfonts",
    "static": true,
    "resolve": false
  

但它不会在生产中工作 because of this issue，基本上 Snowpack 无法从 node_modules 镜像任何东西，因为这个文件夹是硬编码排除的。

我找到了使用ncp package (npm i --save-dev ncp) 和@snowpack/plugin-run-script 的解决方法。将插件添加到snowpack.config.js 并将cmd 选项设置为如下所示：

"plugins": [
  ["@snowpack/plugin-run-script", 
    "cmd": "ncp node_modules/@fortawesome/fontawesome-free/webfonts/ _dist/webfonts"
  ]
]

这会将 Font Awesome webfonts 文件夹内容复制到名为 webfonts 的 Web 根文件夹中，因此 CSS 相关导入将起作用。

如果您不使用 PostCSS，请在第 3 步安装文件夹（将在开发模式下工作，而不是在生产中），按照说明使用 ncp（将解决生产中的问题）并将这一行添加到您的应用程序 javascript 入口点：

import '@fortawesome/fontawesome-free/css/all.css';

【讨论】：

安装@fortawesome/fontawesome-free 是工作AFAIK 所必需的

感谢您提供广泛而有用的答案。针对这个特定用例的两个额外提示：1. 如果您需要通配符，请尝试使用 copyfiles 而不是 ncp：copyfiles -f node_modules/@fontsource/**/*.woff* public/files/ 2. 由于字体资源很少更改，可能会将复制任务添加到 package.json 并运行仅一次：scripts: "copy-assets": "copyfiles -f node_modules/@fontsource/**/*.woff public/files/", "dev": "yarn copy-assets && snowpack dev", "build": "yarn copy-assets && snowpack build"