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

Question

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

我可以 link 到 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 并尝试 link它在 src/index.html:

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

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

<i class="fas fa-question-mark"></i>

dojo 构建过程在将 assets 内容复制到 output/dev/assets 时发出大量“正在复制文件 blah.css”，我在 output/dev/assets/fontawesome-pro-5.15.3-web 中看到了 FontAwesome 文件，但是构建给出：

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 使用 <link rel="stylesheet" href="assets/simple.css"> 时得到非常相似的结果，所以根据我对 webpack 的理解，这似乎是一个普遍的问题。 =34=]

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

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

Answer 1

感谢 Dojo discord 频道上的@agubler，修复显然很简单：

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

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

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

How to add static CSS to Dojo 7 application e.g. FontAwesome?

css

build

webpack

dojo2