如何解决snowpack woff2字体无法加载
snowpack比webpack超级快。 但是我遇到了一些问题,例如当我导入font-awesome时,我的react项目失败了。 导致Snowpack无法加载字体(.woff2)文件。
snowpack官方网站与此主题无关。
现在如何解决?
解决方法
嗯,现在很痛苦。我会解释原因。
理论:
- [如果您不使用 PostCSS,请跳到底部] 使用 Snowpack
plugin-postcss
和 PostCSSpostcss-import
插件。您的 PostCSS 配置可能如下所示:
module.exports = {
plugins: {
'postcss-import': {},// Other plugins...
}
}
- 如果您不想修复所有
@font-face
路径,则您的 CSS 需要位于css/app.css
之类的子文件夹中,因为 Font Awesome CSS 以相对方式导入字体({{1} }).
../webfonts
- 最后一步,您应该将
@import '@fortawesome/fontawesome-free/css/all.css'; /** Your CSS rules... **/
目录镜像到构建目标的node_modules/@fortawesome/fontawesome-free/webfonts
目录中(我的是webfonts
)。这可以在您的_dist
中使用以下代码轻松解决:
snowpack.config.js
但它在生产环境 because of this issue 中不起作用,基本上 Snowpack 无法从 "mount": {
"node_modules/@fortawesome": {
"url": "/webfonts","static": true,"resolve": false
}
}
镜像任何内容,因为此文件夹是硬编码排除的。
我找到了使用 ncp package
(node_modules
) 和 @snowpack/plugin-run-script
的解决方法。将插件添加到 npm i --save-dev ncp
并将 snowpack.config.js
选项设置为如下所示:
cmd
这会将 Font Awesome "plugins": [
["@snowpack/plugin-run-script",{
"cmd": "ncp node_modules/@fortawesome/fontawesome-free/webfonts/ _dist/webfonts"
}]
]
文件夹内容复制到名为 webfonts
的网络根文件夹中,因此 CSS 相对导入将起作用。
如果您不使用 PostCSS,请在步骤 3 中挂载文件夹(将在开发模式下工作,而不是在生产模式下),按照说明使用 webfonts
(将解决生产)并将此行添加到您的应用程序 JavaScript 入口点:
ncp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。