Currently, I have a Dojo 7 (Dojo 2) application that was built using the dojo-cli tool. I am now looking to enhance it by incorporating FontAwesome icons. Luckily, I have a Pro subscription that provides me with a zip file containing various folders of CSS and web font files that I would like to integrate into my project and then link to from index.html. My understanding of the Dojo build process, particularly webpack, is quite limited.
Adding the free version of FontAwesome from the CDN to src/index.html is easily achievable and works well:
<!link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
According to the Dojo 2 tutorial found at , I can place static assets in the assets folder. Hence, I extracted the zipfile to
assets/fontawesome-pro-5.15.3-websrc/index.html:
<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">
My goal is to utilize FontAwesome in the conventional manner without resorting to CSS Modules.
<i class="fas fa-question-mark"></i>
During the Dojo build process, a significant number of "copying file blah.css" messages are displayed as it duplicates the content of assets to output/dev/assets. I can see the FontAwesome files in
output/dev/assets/fontawesome-pro-5.15.3-webHtml Webpack Plugin:
Error: Child compilation failed:
Module not found: Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' in '/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 noticed that it references the path relative to
/home/username/go/projectname/srcassets folder is one level above in the source tree, I also attempted to use a relative path in src/index.html:
<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">
However, this resulted in a different failure:
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
The same issue occurred when I created an assets/simple.css file and tried to link to it using
<link rel="stylesheet" href="assets/simple.css">webpack.
Would it be more appropriate to utilize the "static assets" method for these FontAwesome files, and if so, how can I resolve this build error? Alternatively, should I attempt to incorporate this third-party CSS library as a CSS Module, and if yes, how can I achieve that?
The problem could relate to webpack's "publicPath" concept, as discussed in https://webpack.js.org/guides/public-path/. If this is the case, I assume I need to make adjustments to my .dojorc to influence the usage of webpack during the Dojo build process.