[英]How to add static CSS to Dojo 7 application e.g. FontAwesome?
I have a fairly basic Dojo 7 (Dojo 2) app built with the dojo-cli tool.我有一个使用 dojo-cli 工具构建的相当基本的 Dojo 7 (Dojo 2) 应用程序。 Now I'd like to add FontAwesome icons to it.
现在我想给它添加 FontAwesome 图标。 I have a Pro subscription so I have a zip file with various folders of css and web font files that I want to include in my project, then link to from index.html.
我有一个 Pro 订阅,所以我有一个 zip 文件,其中包含我想要包含在我的项目中的各种 css 和 web 字体文件文件夹,然后从 index.html 链接到。 I believe the Dojo build process uses
webpack
, and my knowledge of it is extremely limited.我相信 Dojo 构建过程使用
webpack
,我对它的了解非常有限。
I can link to fontawesome CDN free version in src/index.html
easily, which works fine:我可以轻松链接到
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">
The Dojo 2 tutorial at https://dojo.io/learn/building/static-assets says I can put static assets in the assets
folder, so I extract the zipfile to assets/fontawesome-pro-5.15.3-web
and try to link to it in src/index.html
: https://dojo.io/learn/building/static-assets 上的 Dojo 2 教程说我可以将静态资产放在
assets
文件夹中,所以我将assets/fontawesome-pro-5.15.3-web
文件解压缩到assets/fontawesome-pro-5.15.3-web
并尝试在src/index.html
链接到它:
<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">
My intention is to use FontAwesome in the traditional way, not using CSS Modules.我的意图是以传统方式使用 FontAwesome,而不是使用 CSS Modules。
<i class="fas fa-question-mark"></i>
The dojo build process emits a large amount of "copying file blah.css" as it copies assets
content to output/dev/assets
and I see the FontAwesome files in output/dev/assets/fontawesome-pro-5.15.3-web
, however the build gives: dojo 构建过程会发出大量“复制文件 blah.css”,因为它将
assets
内容复制到output/dev/assets
并且我在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
I notice that it's referencing relative to /home/username/go/projectname/src
, and the original assets
folder is one level above that in the source tree, so I also tried this relative path in src/index.html
:我注意到它是相对于
/home/username/go/projectname/src
引用的,并且原始assets
文件夹在源树中比它高一级,所以我也在src/index.html
尝试了这个相对路径:
<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">
But this fails differently:但这以不同的方式失败:
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
I have very similar results creating an assets/simple.css
file and linking to that with <link rel="stylesheet" href="assets/simple.css">
so this seems a generic problem with my understanding of webpack
.我有非常相似的结果创建一个
assets/simple.css
文件并使用<link rel="stylesheet" href="assets/simple.css">
链接到该文件,所以这似乎是我对webpack
理解的一个普遍问题。
Should I be using the "static assets" approach with these FontAwesome files, and if so how do I fix this build situation, or should I be trying to use this third party CSS library as a CSS Module, and if so, how?我应该对这些 FontAwesome 文件使用“静态资产”方法,如果是这样,我该如何解决这种构建情况,或者我应该尝试使用这个第三方 CSS 库作为 CSS 模块,如果是这样,如何解决?
It may be to do with webpack's "publicPath" concept, see https://webpack.js.org/guides/public-path/ .. if so I'd presume I need to do something to my .dojorc
to control the Dojo build's use of webpack.这可能与 webpack 的“publicPath”概念有关,请参阅https://webpack.js.org/guides/public-path/ .. 如果是这样,我认为我需要对我的
.dojorc
做一些事情来控制 Dojo构建对 webpack 的使用。
Thanks to @agubler on the Dojo discord channel, the fix is apprently this simple:感谢 Dojo Discord 频道上的 @agubler,修复显然就是这么简单:
<link rel="stylesheet" href="/assets/fontawesome-pro-5.15.3-web/css/all.min.css">
Builds and works fine.构建和工作正常。 Feels dirty to use an absolute URL like that so if anyone has a more meaty, explanatory answer to give, I'd be happy to mark that as the Answer instead of this :)
使用这样的绝对 URL 感觉很脏,所以如果有人有更丰富、更解释性的答案要给出,我很乐意将其标记为答案而不是这个 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.