Images in CSS, how to append WordPress path (setPublicPath set)

[J_D]

Sage 10.x: Compiling Assets | Roots Documentation

When I compile, the url points to:

https://[staging host].com/images/the-image.jpg instead of https://[staging host].com/wp-content/themes/the-theme-dir/images/the-image.jpg

I have setPublicPath set in bud.config.js:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
     .proxy('http://example.test')

     /**
      * Development URL to be used in the browser.
      */
     .serve('http://0.0.0.0:3000')
 
     /**
      * Relative path to the public directory.
      */
     .setPublicPath('/wp-content/themes/the-theme-dir/public/');
};

How do I get the compiler to add “/wp-content/themes/the-theme-dir/”?

[strarsis]

In the stylesheet(s) you either use stylesheet-relative paths (e.g. url('../../../images/test.png')) (paths are always relative to entrypoint stylesheet, even if imported in SASS by the way), or absolute paths, but then the asset URLs need to be resolved by bud (underlying webpack).

It appears that development for this feature is in progress, but I am not sure whether it is possible yet:

[Bud/Sage10/SCSS] Using images in a SASS file

@aki thanks for trying bud! Sorry for the lateness of the reply, I’ve been super busy getting 5.1.0 out the door (which solves a few issues related to assets in css/scss files). Getting onto 5.1.0 is the next step for you. One thing I’ve bumped into (even in 5.1.0) is that the ~@images alias doesn’t seem to play nicely with @roots/bud-sass. I don’t know yet whether that is solvable on our end or an incompatibility with upstream dependencies like sass-loader and postcss-scss. For now you’ll need…

Using stylesheet-relative URLs works nice for me though and doesn’t introduce an extra layer of complexity (resolving asset URLs/modifying URLs), the only exception is when I want to modify inlined SVGs (where CSS limitations force me to do this) and then I use a PostCSS plugin, which would resolve URLs differently anyway.

[tedw]

FWIW setting bud.setPublicPath('../'); worked for me (see [bug] Asset paths in CSS break if publicPath isn’t defined in bud.config.mjs when upgrading to Bud 6.1 · Issue #1547 · roots/bud · GitHub).

[J_D]

Unfortunately, that didn’t work for me.

[kellymears]

Share your css.

I just tested it with:

package	version
roots/acorn	^2.1
@roots/bud	6.3.2
@roots/sage	6.3.2
@roots/bud-tailwindcss	6.3.2

This is my source file (./resources/styles/app.css):

.target {
  background-image: url(@images/roots.svg);
}

With no public path set the emitted css (./public/css/app.css) is:

body {
  background: url(../images/roots.f12b27.svg);
}

And with the public path set the emitted css looks like this:

body {
  background: url(/app/themes/sage/public/images/roots.f12b27.svg);
}

Both of these are fine.

If you don’t want to use @src or @images, then you’ll need to resolve the path on your own.

So, this would be the source file:

body {
  background: url(../images/roots.svg);
}

And the emitted asset paths are exactly the same as above.

[J_D]

setPublicPath() doesn’t seem to do anything. Background images in CSS are compiled to host.com/images/the-image.jpg instead of host.com/wp-content/themes/theme-name/public/images/the-image.jpg regardless of what I put there.

I’m using Sass instead of Tailwind.

For example, the following CSS in source file resources/styles/common/_global.scss (imported to resources/styles/app.scss):

background-image: url(../images/text-accent.svg);

(Note ../)

Gives an error:

webpack built bud e7479ea4e005f3e68ef5 in 4268ms
⠦ 98% emitting

ERROR ./resources/styles/app.scss

Module not found: Error: Can’t resolve ‘./images/text-accent.svg’ in ‘./resources/styles’

ERROR ./resources/styles/app.scss

Module not found: Error: Can’t resolve ‘./images/background-accent.svg’ in ‘./resources/styles’

If I do

background-image: url(../../images/text-accent.svg);

(Note ../../)

It compiles OK, but the path is host.com/images/the-image.jpg which not what I need.

It should be host.com/wp-content/themes/theme-name/public/images/the-image.jpg

[avior]

This issue still exists only with yarn dev.
When running yarn build public path is resolved.

Tested with:

package	version
roots/acorn	^2.1
@roots/bud	6.3.3
@roots/sage	6.3.3
@roots/bud-tailwindcss	6.3.3

[falc0nline1]

I use multidev env, so you also can set a public path from your .env or wp-config.php file, like

define('APP_PUBLIC_PATH', getenv('APP_PUBLIC_PATH') ?: '/app/themes/theme/public/');

Also, try to test with the key for bud bud build --publicPath /your-path/.

Both options work for me.

package	version
roots/acorn	^2.1.2
@roots/bud	6.3.2
@roots/sage	6.3.2

[avior]

I tried your solution but it did not work.
Public set is not working with yarn dev only in css!

[elvismdev]

@avior I’m having the exact same problem when running yarn dev (described here). Have you found a solution for it? If so could you share what resolves this issue?

[ben]

I’ve unlisted and locked this topic because it’s one of three old topics you’ve bumped all related to the same thing. In the future, do not bump several topics for the same issue.

Please create a new topic to discuss your issue.