After building, paths to the css background images don’t include assets folder. Instead they’re pointing to the root url + path mentioned in scss file.
Bud conf:
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
export default async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
editor: ['@scripts/editor', '@styles/editor'],
app: ['@scripts/app', '@styles/app'],
})
/**
* 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/**/*')
.proxy()
/**
* Development URL to be used in the browser.
*/
.serve('http://0.0.0.0:3000');
}
Part of the .scss:
.icon-1 {
background: url('../images/academy-order-icon-1.png') no-repeat 50% 50%;
-webkit-background-size: 40px;
-moz-background-size: 40px;
background-size: 40px;
}
.icon-2 {
background: url('../images/academy-order-icon-2.png') no-repeat 50% 50%;
-webkit-background-size: 40px;
-moz-background-size: 40px;
background-size: 40px;
}
.icon-3 {
background: url('../images/academy-order-icon-3.png') no-repeat 50% 50%;
-webkit-background-size: 40px;
-moz-background-size: 40px;
background-size: 40px;
}
.icon-4 {
background: url('../images/academy-order-icon-4.png') no-repeat 50% 50%;
-webkit-background-size: 40px;
-moz-background-size: 40px;
background-size: 40px;
}
After building:
.academy-order-wrapper .col-info .icon-1 {
background: url(https://localhost/images/academy-order-icon-1.png) no-repeat 50% 50%;
background-size: 40px;
}