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

bud
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: [],
};