如何将静态 CSS 添加到 Dojo 7 应用程序，例如字体真棒？

问题描述

我有一个使用 dojo-cli 工具构建的相当基本的 Dojo 7 (Dojo 2) 应用程序。现在我想给它添加 FontAwesome 图标。我有一个 Pro 订阅，所以我有一个 zip 文件，其中包含我想要包含在我的项目中的各种 css 和 web 字体文件文件夹，然后从 index.html 链接到。我相信 Dojo 构建过程使用 webpack，我对它的了解非常有限。

我可以轻松链接到 src/index.html 中的 fontawesome CDN 免费版本，效果很好：

<!link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

https://dojo.io/learn/building/static-assets 的 Dojo 2 教程说我可以将静态资产放在 assets 文件夹中，因此我将 zip 文件解压缩到 assets/fontawesome-pro-5.15.3-web 并尝试在 {{1} 中链接到它}：

src/index.html

我的意图是以传统方式使用 FontAwesome，而不是使用 CSS 模块。

<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">

dojo 构建过程会发出大量“复制文件 blah.css”，因为它将 <i class="fas fa-question-mark"></i> 内容复制到 assets 并且我在 output/dev/assets 中看到了 FontAwesome 文件，但是构建给出：

output/dev/assets/fontawesome-pro-5.15.3-web

我注意到它是相对于 Html Webpack Plugin: Error: Child compilation failed: Module not found: Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' i n '/home/username/go/projectname/src': Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' in '/home/username/go/projectname/src' - compiler.js:79 [travesty]/[html-webpack-plugin]/lib/compiler.js:79:16 引用的，并且原始 /home/username/go/projectname/src 文件夹比源树中的那个文件夹高一级，所以我也在 assets 中尝试了这个相对路径：

src/index.html

但这会以不同的方式失败：

<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">

我在创建 Html Webpack Plugin: Error: /home/username/go/projectname/src/index.html:97 module.exports = __webpack_public_path__ + "all.min.30RjDni8.css"; ^ ReferenceError: __webpack_public_path__ is not defined - index.html:97 Object../assets/fontawesome-pro-5.15.3-web/css/all.min.css /home/username/go/projectname/src/index.html:97:18 文件并使用 assets/simple.css 链接到该文件的结果非常相似，所以这似乎是我对 <link rel="stylesheet" href="assets/simple.css"> 理解的一个普遍问题。

我是否应该对这些 FontAwesome 文件使用“静态资产”方法，如果是这样，我该如何解决这种构建情况，或者我应该尝试使用这个第三方 CSS 库作为 CSS 模块，如果是这样，怎么样？

这可能与 webpack 的“publicPath”概念有关，请参阅 https://webpack.js.org/guides/public-path/ .. 如果是这样，我想我需要对我的 webpack 做一些事情来控制 Dojo 构建对 webpack 的使用。

解决方法

感谢 Dojo Discord 频道上的 @agubler，修复显然如此简单：

<link rel="stylesheet" href="/assets/fontawesome-pro-5.15.3-web/css/all.min.css">

构建并运行良好。使用这样的绝对 URL 感觉很脏，所以如果有人有更丰富、更解释性的答案要给出，我很乐意将其标记为答案而不是这个 :)