SASS mixins are not available
mephinet opened this issue · 2 comments
Hi @jeerbl , thanks for your work on webfonts-loader - this does exactly what I was looking for when moving my team from a proprietary svg-to-font solution. I succeeded in generating the fonts and the CSS, but when it comes to SASS, I failed. I created a minimal reproducer that works fine with CSS, can be switched to SASS by removing 3 comments, and reproduces my issue.
I would be glad for any input on that I'm doing wrong, or whether the issue is caused by changes in SASS (deprecation of @import, ...)
The producer is here: https://github.com/mephinet/webfonts-loader-reproducer
The readme lists the steps to show that CSS works and to reproduce the SASS issue.
I'm happy for any input!
After digging deeper into the code of sass-loader, I think this is a bit trickier than expected. Whereas the generated CSS code is ready to be returned to webpack, the scss output needs to be parsed and processed by sass in order for the mixins to be executed.
As far as my understanding goes, the scss code generated by webfonts-loader needs to be available in the context of the sass-loader, so that the mixins can be applied. This is not possible when webfonts-loader is triggered from a JS file. Instead we need an @import statement in one of the scss files that triggers webfonts-loader to generate the scss mixin.
sass-loader supports proxyCustomImporters (https://github.com/webpack-contrib/sass-loader/blob/6b01c64bcfea5f32521d7eef86a1f1361ed612a3/src/utils.js#L104), but this code is only triggered for non-local files. Importing any other file but a scss file is also not possible as the resolvable files are restricted here: https://github.com/webpack-contrib/sass-loader/blob/6b01c64bcfea5f32521d7eef86a1f1361ed612a3/src/utils.js#L485
Needs some further discussion...
Stale issue message