# Relative paths to images in CSS doesn't work anymore (ie. background-image path) **URL:** https://discourse.roots.io/t/relative-paths-to-images-in-css-doesnt-work-anymore-ie-background-image-path/19431 **Category:** sage **Tags:** sage9 **Created:** 2020-11-02T16:00:59Z **Posts:** 12 ## Post 1 by @dangelion — 2020-11-02T16:00:59Z Hi I can’t load image from CSS, I’m using this: `background-image: url('../images/backgrounds/footer-bg-1.jpg');` but I get error ``` ERROR Failed to compile with 1 errors This relative module was not found: * ./images/backgrounds/footer-bg-1.jpg in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib? ... ``` What’s the correct way? Settings in **config.json** ``` "publicPath": "/wp-content/themes/project-name", "devUrl": "http://project-name.test:9999", "proxyUrl": "http://localhost:3000", ``` and **config-local.json** ``` { "proxyUrl": "http://192.168.x.x:3000", "open": "external" } ``` --- ## Post 2 by @alwaysblank — 2020-11-03T16:22:45Z What file are you putting this line in? Webpack needs to find the file during the build process iirc, so the path needs to be relative to the css file you’re using it in, _not_ a path to where the image will be after the build process. --- ## Post 3 by @dangelion — 2020-11-03T17:06:57Z @alwaysblank That line is in: `wp-content/themes/theme-name/resources/assets/styles/layouts/_footer.scss` That’s something wrong with that? --- ## Post 4 by @dangelion — 2020-11-05T14:50:56Z I think there’s someting wrong with module `resolve-url-loader` It seems I can’t use relative path ``` Module build failed: Error: resolve-url-loader: CSS error predicate must return an absolute path or the result of calling next() ``` Never experienced this problem in previous Sage. Anyone? --- ## Post 5 by @alwaysblank — 2020-11-05T17:14:25Z I created a simple replication of this problem by doing the following: - Cloned the sage repo and checked out tag 9.0.9 (the most recent Sage 9 version) - Used NVM to set Node version to 8.17.0 - Ran `npm install` - Ran `npm build` to make sure an unmodified repo built correctly (it did). - Added your css to `styles/layouts/_footer.scss`. - Made the following modifications to comply w/ Stylelint: - Reduced indent to 2 spaces - Changes single quotes around path to double quotes - Ran `npm build` Following these steps, I was unable replicate your results. I was able to build with no errors, and the image was copied to the `dist` folder on build, as expected. Since you’ve provided no other information about your environment, my initial guesses would be: - You have modified the build process in some way, which is causing the issue. - You are using a version of Node that has some incompatibility w/ some aspect of the build process (unfortunately I don’t have any good suggestions for tracking this down if so). - You have a typo in your path (if I introduce a typo into my path, I get an error very similar to the one you see). --- ## Post 6 by @dangelion — 2020-11-12T14:11:16Z @alwaysblank There’s something real wrong here. I reinstalled Sage 9.0.10, fresh and clean via composer 1.7.2. Then `yarn`, `yarn build` and `yarn start` (I use node 10.22.1, just because reinstalling Sage it installed 9.0. **10** that requires node 10. Anyway at the time I was writing first post I used Sage 9.0.9 with node 8.17 and I had same exact error). Put an image in `resources/assets/images/bg.jpg`. Add in `resources/assets/styles/main.scss` the line `body { background-image: url(../images/bg.jpg); }` (image is under `dist/images`) and I get error ``` Module build failed: Error: resolve-url-loader: CSS error predicate must return an absolute path or the result of calling next() ``` ![err](https://discourse.roots.io/uploads/default/original/2X/c/c2b9b9c4ea14086a90cc6dc3ed1cb0cd375266f4.jpeg) Tried also to replace resolve-url-loader 3 with ~2.3.1 as said [here](https://stackoverflow.com/a/53890333/1252920) but nothing… I get `The "from" argument must be of type string. Received type undefined` Where I’m wrong? I never had this issues in many projects made with Sage 9. --- ## Post 7 by @dangelion — 2020-11-13T09:07:47Z I’m back to Sage 9.0.9, downgraded library `resolve-url-loader` to `~2.3.1` and now it seems to work --- ## Post 8 by @hola_ontiveros — 2020-11-20T03:50:37Z I just ran into the issue, create new project from the ground, copied old code from a project of some months ago (working flawlessly in old code) and it just don’t work, debug info doesn’t throw anything interesting… Downgrading to `~2.3.1` with the same version of sage also does the trick. There’s something seriously wrong around here… ``` Mac OS 10.15.6 ``` Yarn 1.22 Node 12.18.3 Sage 9.0.10 --- ## Post 9 by @maroluke — 2020-11-20T23:33:40Z How did you go back to sage 9.0.9? --- ## Post 10 by @joemoses — 2020-11-26T12:35:15Z To get around the problem, I only downgraded the package.json to match 9.0.9. Definitely not ideal, but you can find 9.0.9 here - [https://github.com/roots/sage/releases/tag/9.0.9](https://github.com/roots/sage/releases/tag/9.0.9). Grab the package.json, copy & paste the content into yours. Delete node\_modules (to be sure) `yarn` You should be good to go. --- ## Post 11 by @maroluke — 2020-11-26T12:59:28Z Nice, i just installed the explicit version like: `yarn add tailwindcss@9.0.9` or `npm install tailwindcss@9.0.9` Anyway, this is a known issue: [https://github.com/roots/sage/issues/2585](https://github.com/roots/sage/issues/2585) --- ## Post 12 by @system — 2020-12-14T16:12:02Z This topic was automatically closed after 42 days. New replies are no longer allowed.