First I just want to give some links to things before I deep dive.
Breaking build. https://github.com/MorphicPro/morphic.pro/runs/969426390?check_suite_focus=true The only thing that changed in this build was bumping css-loader from 3.6.0 to 4.2.1 commit here: https://github.com/MorphicPro/morphic.pro/commit/eecf41d671f1b9357f872bfac0e378f6b81260ac
From reading https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0 it looks like something with the way css-loader resolves paths locally has changed. IE: improve url() resolving algorithm (bc19ddd) https://github.com/webpack-contrib/css-loader/commit/bc19ddd8779dafbc2a420870a3cb841041ce9c7c
Before 4 in 3.6 I was successfully resolving my path via url() https://github.com/MorphicPro/morphic.pro/blob/master/assets/css/app.css#L12
I was also using file-loader to move the font to the correct path via https://github.com/MorphicPro/morphic.pro/blob/master/assets/webpack.dev.config.js#L76-L83
After upgrading css-load to 4 this looks to now be broken with error:
ERROR in ./css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/fonts/icomoon.woff' in '/Users/joshchernoff/Dev/morphic.pro/assets/css'
From the error, it looks as if it's trying to resolve the font path inside the css folder. I've tried updating the font path of src: url("/fonts/icomoon.woff"); to src: url("../fonts/icomoon.woff"); but no luck. What changes should I be looking for when upgrading from 3 to 4?
I found a solution that works for me.
I just disabled the URL resolver for css-loader and overcame my exception and everything looks to still be loading correctly 🤷♂️