match4everyone / match4everything

Other
7 stars 0 forks source link

Move font-awesome to main bundle #198

Closed bjrne closed 3 years ago

bjrne commented 3 years ago

When I added the file to app.scss, I got lots of font-related errors, so I added it to the js file like before.

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 5:36-79
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 4:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 9:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.ttf?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 8:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 6:36-89
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 7:36-88
 @ ./src/css/app.scss
 @ ./src/main.js
maltezacharias commented 3 years ago

When I added the file to app.scss, I got lots of font-related errors, so I added it to the js file like before.

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 5:36-79
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 4:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.svg?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 9:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.ttf?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 8:36-87
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 6:36-89
 @ ./src/css/app.scss
 @ ./src/main.js

ERROR in ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss)
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff?v=4.7.0' in '/home/match4everything/frontend/src/css'
 @ ./src/css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/css/app.scss) 7:36-88
 @ ./src/css/app.scss
 @ ./src/main.js

I would think that there is maybe a relative path that needs to be fixed? Just to make sure, you ran in docker or locally? Did you make sure that font-awesome was indeed installed?

bjrne commented 3 years ago

Who knew that you have to google EVERYTHING as a developer :stuck_out_tongue_winking_eye: Interesting solution though. I still think there has to be a better one, but I don't think its worth the time to find it, as this one works well enough.