webpack - snowpack woff2 字体无法加载

Question

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

snowpack官网没有关于这个话题。

现在如何解决？

Answer 1

嗯，现在很痛苦。我会解释为什么。

理论：

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

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

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

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

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

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

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

但由于这个问题，它在生产中不起作用，基本上 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 Awesomewebfonts文件夹的内容复制到名为 的 Web 根文件夹webfonts中，因此 CSS 相对导入将起作用。

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

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