我已经使用npm将fontawesome安装到我的自定义主题中。我尝试了以下方法:
我已经在theme.json中添加了所有必要的样式路径:
"app/storefront/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"app/storefront/node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"app/storefront/node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"app/storefront/node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
我尝试通过导入scss来添加必要的文件:
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
我仍然在前端得到一个404错误。/theme/6bad85e1d79ce9868d87997e19558d80/webfonts/fa-solid-900.ttf
我是否需要将它们复制到项目中,或者可以不复制它们?
一般来说,将fontawesome或npm包添加到自定义插件的正确做法是什么?
1条答案
按热度按时间ebdffaop1#
将字体文件移动到插件目录中的
src/Resources/public/static
。理想情况下,只为字体创建一个子目录,如src/Resources/public/static/fonts
。复制的文件应该是:
然后在
src/Resources/app/storefront/src/scss/base.scss
或导入的scss
文件中,覆盖字体系列的源路径。最后,使用这两个CLI命令编译主题并安装资产。
webpack.js.js更新
您可以设置
webpack.config.js
来自动将字体资源复制到静态资源目录。