Hi all,
We are adding a image url in the resources/styles/app.css
file. But when we are checking the front-end it outputs the image url as /images/projects-slider.png
which returns a 404 error. We did try to search in the forum, but we couldn’t find any working answer.
Here is the style we did add:
.project-slider:before {
content: "";
width: 100%;
position: absolute;
top: 0;
height: 20px;
background-image: url("../images/projects-slider.png");
}
Here is our bud file
// @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("https://syboned.test")
/**
* Development origin
*/
.serve("https://0.0.0.0:3000")
/**
* URI of the `public` directory
*/
.setPublicPath("/app/themes/syboned/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();
};
What do we have to change?
Thanks for your time!