CODEWITHSUNDEEP
webpackcss-loader
MorphicPro
MorphicPro

Reputation: 2902

css-loader from 3.6 to 4 broke loading prior path to fonts

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?

Upvotes: 3

Views: 1374

Answers (2)

MorphicPro
MorphicPro

Reputation: 2902

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 🤷‍♂️

https://webpack.js.org/loaders/css-loader/#url

Upvotes: 1

Pippo
Pippo

Reputation: 925

This might not be your case but I figured it out... it seems the exception above is valid, and I made 2 assumptions and moved on, see below:

1:. version 3.x was ignoring and hiding exceptions related to url() not finding an image for a given relative path which made webpack proceed with the build where 4.x just isn't that forgiving.

2:. somehow 4.x mapped unused/additional files that try to load an image with url() and because they are deprecated files the relative path to these images is no longer correct.

the reason I made the assumptions above was because I mapped all the files throwing the exception in your question and noticed the files with the url() trying to load some image that no longer existed and the classes were not used in my code and 3 years old...

So I just removed the files/classes that were deprecated and it built everything as expected.

Upvotes: 0

Related Questions