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

bud
1

Hello,

I’m trying to use Bud with Sass in its latest version and I’m having a little trouble calling my images in a SCSS file.

I have a file called header.scss with :

background: url(~@images/bg-header.png) var(--color-dark) no-repeat center top;

When I’m on the home page, everything is fine, I can see my image.

http://localhost:3000/assets/bg-header.png

But when I go to the /contact/ page, I see that the url of the image is not good:

http://localhost:3000/contact/assets/bg-header.png

Configuration

Sage 10
Bud next 20
SASS

Do you have an idea?

Thanks guys :slight_smile:

2

@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 to use relative paths like url('../../images/my-image.png')

2 Likes
3

Hi, I’m having an issue using relative paths like url('../../images/my-image.png')

It only works using “bud build”. If I use “bud dev” it doesn’t work.

When I run “bud dev” it doesn’t create the app.css file on the /public folder. It uses the CSS in a tag.

It only works when I run “bud build” that creates the app.css file.

So when I run bud build command, I have this css on the page and it works perfectly:

background-image: url('http://domain.com/app/themes/theme_name/public/assets/my-image.a384e6.png.);

But when I run bud dev command, I have this on the page and it doesn’t work:

<style> background-image: url(http://domain.com/my-image.png) </style>

Can I do something to fix this?

4

Are you using .setPublicPath() in your config file?

It should be .setPublicPath('/app/themes/theme_name/public/')

I’ll check it out later to make sure everything is working properly with scss’s resolve-url loader, either way.

there is no css file generated in development. styles are applied with js so they can be hot reloaded.

6

@kellymears I’m having the same exact issue as @Luiz_Felipe_123 describes and my .setPublicPath() in bud.config.mjs file is pointing to the right path for the theme public directory:

/**
 * URI of the `public` directory
 */
 .setPublicPath("/app/themes/sage/public/")

When I run yarn build the URL to my background image in the resulting CSS is correct and it loads as expected:

// https://sitename-wp.lndo.site/app/themes/sage/public/css/app.d981f3.css

.bg-chevron {
    background-image: url(/app/themes/sage/public/images/chevron.ae0977.svg);
}

But, when I run yarn dev it doesn’t sets the background-image: url() value to the right path to this asset during the “dev session” mode. Resulting in a 404 when the file is loaded from CSS.

// webpack://./resources/styles/app.css

.bg-chevron {
    background-image: url(https://sitename-wp.lndo.site/images/chevron.svg);
}

What do we have missing here in order to have these image assets loaded correctly from CSS during yarn dev?

@Luiz_Felipe_123 By any chance you were able to resolve this issue on your end? If so, could you post here the solution?

For greater context, I’m sharing here down below the current contents of my bud.config.mjs file and tailwind.config.cjs file where this background image class is being defined using the custom values approach.

bud.config.mjs


// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://example.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sage/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
        },
      })
      .useTailwindColors()
      .useTailwindFontFamily()
      .useTailwindFontSize()
      .enable()
};

tailwind.config.cjs

// https://tailwindcss.com/docs/configuration
module.exports = {
  content: ["./index.php", "./app/**/*.php", "./resources/**/*.{php,vue,js}"],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
      backgroundImage: {
        chevron: "url('../images/chevron.svg')",
      },
    },
    container: {
      center: true,
    },
    screens: {
      sm: "540px",
      md: "720px",
      lg: "980px",
      xl: "1200px",
      "2xl": "1296px",
    },
  },
  plugins: [],
};
8

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.