CSS background-image works on localhost, but not on deployment

sage
,
1

I have the following block in my CSS that is supposed to add a background behind image blocks on the site.

.wp-block-image {
    figure {
        @apply relative
            z-10;
            figcaption {
                @apply text-center
                    bg-white/75
                    font-bold
                    mt-0
                    mb-0
                    p-2
                    text-sm;
            }
        &::before {
            @apply absolute
                block
                content-['']
                -top-3
                -right-3
                -bottom-3
                -left-3
                /* bg-plaid-background */
                -z-10;
                background-image: url('@images/plaid-background.jpeg');
        }
    }
}```

The CSS works if I point to ```http://localhost:3000``` but it doesn't work on the production site after running ```yarn build```.

This is my full bud config file:

export default async (app) => {

app
.entry(‘app’, [‘@scripts/app’, ‘@styles/app’])
.entry(‘editor’, [‘@scripts/editor’, ‘@styles/editor’])
.assets([‘images’]);

app.setPublicPath(‘/app/themes/white-roses/public/’);

app
.setUrl(‘http://localhost:3000’)
.setProxyUrl(‘https://plaidsylvania.com’)
.watch([‘resources/views’, ‘app’]);

app.wpjson
.setSettings({
background: {
backgroundImage: true,
},
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: ,
},
custom: {
spacing: {},
typography: {
‘font-size’: {},
‘line-height’: {},
},
},
spacing: {
padding: true,
units: [‘px’, ‘%’, ‘em’, ‘rem’, ‘vw’, ‘vh’],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize();
};