Roots Discourse

Relative paths to images in CSS doesn't work anymore (ie. background-image path)

sage
#1

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"
}
#2

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.

#3

@alwaysblank That line is in:

wp-content/themes/theme-name/resources/assets/styles/layouts/_footer.scss

That’s something wrong with that?

#4

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?

#5

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).
#6

@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
err1331×139 49.2 KB

Tried also to replace resolve-url-loader 3 with ~2.3.1 as said here 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.

1 Like
Sage 9.0.10: "Right now, PostCSS does nothing"
How to use files from /assets in scss
Sage 9 - Fonts not in dist/fonts/ after build
#7

I’m back to Sage 9.0.9, downgraded library resolve-url-loader to ~2.3.1 and now it seems to work

#8

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

#9

How did you go back to sage 9.0.9?

1 Like
#10

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.

Grab the package.json, copy & paste the content into yours.

Delete node_modules (to be sure)

yarn

You should be good to go.

1 Like
#11

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

1 Like