Search code examples
csswebpackbuilddojo2

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. Now I'd like to add FontAwesome icons to it. 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. I believe the Dojo build process uses webpack, and my knowledge of it is extremely limited.

I can link to fontawesome CDN free version in src/index.html easily, which works fine:

<!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:

<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.

<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:

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:

<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.

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?

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.

Solution

  • Thanks to @agubler on the Dojo discord channel, the fix is apprently this simple:

    <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 :)