webpack Font真棒字体文件未从SW6中的自定义主题加载

esbemjvw  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(186)

我已经使用npm将fontawesome安装到我的自定义主题中。我尝试了以下方法:
我已经在theme.json中添加了所有必要的样式路径:

  1. "app/storefront/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
  2. "app/storefront/node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
  3. "app/storefront/node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
  4. "app/storefront/node_modules/@fortawesome/fontawesome-free/scss/brands.scss",

我尝试通过导入scss来添加必要的文件:

  1. @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
  2. @import "../../node_modules/@fortawesome/fontawesome-free/scss/regular";
  3. @import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
  4. @import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";

我仍然在前端得到一个404错误。/theme/6bad85e1d79ce9868d87997e19558d80/webfonts/fa-solid-900.ttf
我是否需要将它们复制到项目中,或者可以不复制它们?
一般来说,将fontawesome或npm包添加到自定义插件的正确做法是什么?

ebdffaop

ebdffaop1#

将字体文件移动到插件目录中的src/Resources/public/static。理想情况下,只为字体创建一个子目录,如src/Resources/public/static/fonts
复制的文件应该是:

  1. fa-brands-400.woff2
  2. fa-brands-400.ttf
  3. fa-regular-400.woff2
  4. fa-regular-400.ttf
  5. fa-solid-900.woff2
  6. fa-solid-900.ttf

然后在src/Resources/app/storefront/src/scss/base.scss或导入的scss文件中,覆盖字体系列的源路径。

  1. // `swagexample` is the plugin name all lowercase, replace with your plugin name
  2. $fa-font-path: '#{$sw-asset-theme-url}/bundles/swagexample/static/fonts';
  3. @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
  4. @import "../../node_modules/@fortawesome/fontawesome-free/scss/regular";
  5. @import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
  6. @import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";

最后,使用这两个CLI命令编译主题并安装资产。

  1. bin/console theme:compile
  2. bin/console assets:install

webpack.js.js更新

您可以设置webpack.config.js来自动将字体资源复制到静态资源目录。

  1. // src/Resources/app/storefront/build/webpack.config.js
  2. const { resolve, join} = require('path');
  3. module.exports = () => {
  4. return {
  5. resolve: {
  6. alias: {
  7. '@fortawesome': resolve(
  8. join(__dirname, '..', 'node_modules', '@fortawesome')
  9. )
  10. }
  11. },
  12. module: {
  13. rules: [
  14. {
  15. test: /\.(woff|woff2|ttf|eot)$/,
  16. use: [{
  17. loader: 'file-loader',
  18. options: {
  19. name: '[name].[ext]',
  20. publicPath: resolve(
  21. join(__dirname, '..', '..', '..', 'public', 'static', 'fonts')
  22. ),
  23. outputPath: (url, resourcePath, context) => {
  24. const buildDirs = context.split('/');
  25. const parentDirs = [];
  26. buildDirs.forEach(() => {
  27. parentDirs.push('..');
  28. });
  29. return `${parentDirs.join('/')}/${resolve(
  30. join(__dirname, '..', '..', '..', 'public', 'static', 'fonts')
  31. )}/${url}`;
  32. }
  33. }
  34. }]
  35. }
  36. ]
  37. }
  38. };
  39. }
  1. // src/Resources/app/storefront/src/main.js
  2. import '@fortawesome/fontawesome-free/webfonts/brands-400.woff2';
  3. import '@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf';
  4. import '@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2';
  5. import '@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf';
  6. import '@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2';
  7. import '@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf';
展开查看全部

相关问题