[web] Fix "font: download failed" complain

[dgdavid]

Problem

Custom fonts are not being included in the final bundle, as expected. Most probably, current webpack configuration is not able to understand the Sass @use at rule as an import and thus is not applying the custom configuration for the fonts.scss file

 // Load D-Intaller fonts
 {
    test: /fonts.scss/,
    use: [
      { loader: 'css-loader' },
      { loader: 'sass-loader' }
    ]
  },
  {
    test: /\.(eot|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
      filename: 'fonts/[name][ext]',
    }
  },

Browser complain	Content of dist/ directory
	➜ ls -alh dist total 8,9M drwxr-xr-x 2 4,0K ene 2 09:44 . drwxr-xr-x 11 4,0K ene 2 09:44 .. -rw-r--r-- 1 618K ene 2 09:44 index.css -rw-r--r-- 1 930K ene 2 09:44 index.css.map -rw-r--r-- 1 405 ene 2 09:44 index.html -rw-r--r-- 1 3,9M ene 2 09:44 index.js -rw-r--r-- 1 3,5M ene 2 09:44 index.js.map -rw-r--r-- 1 167 ene 2 09:44 manifest.json -rw-r--r-- 1 183 ene 2 09:44 po.de.js

Solution

Explicitly import the fonts.scss file for ensuring build contains the desired fonts to be downloaded when needed.

➜ ls -alh dist
total 8,9M
drwxr-xr-x 3 4,0K ene 2 09:47 .
drwxr-xr-x 11 4,0K ene 2 09:47 ..
drwxr-xr-x 2 4,0K ene 2 09:47 fonts
-rw-r--r-- 1 618K ene 2 09:47 index.css
-rw-r--r-- 1 930K ene 2 09:47 index.css.map
-rw-r--r-- 1 405 ene 2 09:47 index.html
-rw-r--r-- 1 3,9M ene 2 09:47 index.js
-rw-r--r-- 1 3,5M ene 2 09:47 index.js.map
-rw-r--r-- 1 167 ene 2 09:47 manifest.json
-rw-r--r-- 1 183 ene 2 09:47 po.de.js

➜ ls -alh dist/fonts
total 896K
drwxr-xr-x 2 4,0K ene 2 09:47 .
drwxr-xr-x 3 4,0K ene 2 09:47 ..
-rw-r--r-- 1 44K ene 2 09:47 LatoLatin-BoldItalic.woff2
-rw-r--r-- 1 44K ene 2 09:47 LatoLatin-Bold.woff2
-rw-r--r-- 1 45K ene 2 09:47 LatoLatin-Italic.woff2
-rw-r--r-- 1 43K ene 2 09:47 LatoLatin-Regular.woff2
-rw-r--r-- 1 75K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-300italic.woff
-rw-r--r-- 1 56K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-300italic.woff2
-rw-r--r-- 1 65K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-300.woff
-rw-r--r-- 1 49K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-300.woff2
-rw-r--r-- 1 74K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-500italic.woff
-rw-r--r-- 1 55K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-500italic.woff2
-rw-r--r-- 1 65K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-500.woff
-rw-r--r-- 1 48K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-500.woff2
-rw-r--r-- 1 66K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-regular.woff
-rw-r--r-- 1 49K ene 2 09:47 poppins-v19-latin-ext_latin_devanagari-regular.woff2
-rw-r--r-- 1 47K ene 2 09:47 roboto-mono-v13-vietnamese_latin-ext_latin_greek_cyrillic-ext_cyrillic-regular.woff
-rw-r--r-- 1 37K ene 2 09:47 roboto-mono-v13-vietnamese_latin-ext_latin_greek_cyrillic-ext_cyrillic-regular.woff2

Testing

Manually tested.

[coveralls]

Coverage: 76.117%. Remained the same when pulling 1ca1d19 on fix-fonts-loading into 32b1bbb on master.