search

SAFE-Stack / SAFE-template

dotnet CLI template for SAFE project
MIT License
283 stars 87 forks source link

Error loading npm-installed fonts via SCSS #527

Closed mattgallagher92 closed 10 months ago

mattgallagher92 commented 2 years ago

With the default SAFE Template, importing an npm-installed font via SCSS doesn't work. Errors are shown in the console stating "OTS parsing error: invalid sfntVersion".

Replacing the following line in the webpack.config.js with type: 'asset' resolved the issue.

https://github.com/SAFE-Stack/SAFE-template/blob/fc97e144863b850461d4d6060b84c31b9f5c56fd/Content/default/webpack.config.js#L126

More details about webpack asset modules at https://webpack.js.org/guides/asset-modules/

Repro

You can see a simple repro at https://github.com/mattgallagher92/safe-fonts-bug-repro.

Before installing the font (https://github.com/mattgallagher92/safe-fonts-bug-repro/commit/b8254a7ae5e2612f67bc10b2ea20ea983a856e7e): Standard SAFE Todo list. The targeted item does not have the correct typeface.

After installing the font (https://github.com/mattgallagher92/safe-fonts-bug-repro/commit/14c86f432ed34f1f89d7c670434440ca49628fcb): Browser console showing OTS parsing errors

After updating webpack config (https://github.com/mattgallagher92/safe-fonts-bug-repro/commit/9037df9354f567ce8ed613a4eb68fb553bcdef26): Standard SAFE Todo list. The targeted item has the correct typeface

Question

Should this change (replacing use: ['file-loader'] with type: asset) be reflected in the SAFE template? Should we be using type: asset/resource instead (at least for font files)? I'm not experienced enough with webpack to be sure of the consequences of this change.

mattgallagher92 commented 2 years ago

@isaacabraham can you recommend anyone(s) to ask for advice on this?

isaacabraham commented 1 year ago

Any ideas @MangelMaxime ?

MangelMaxime commented 1 year ago

I stopped using Webpack in favor of Vite.js since 2 years now.

So I don't have a string opinion on it no, you can try to look at how https://github.com/MangelMaxime/fulma-demo does it. It is still using Webpack 5

Larocceau commented 11 months ago

Webpack is being replaced by vite in #564. We can close the ticket as soon as that is merged

RicoSaupe commented 10 months ago

The new release is out and this shouldn't be an issue anymore.