Showing css background images during dev

[szyam]

First off, huge thanks to blonsetar for putting this together, I got it up and running relatively easily.

With the inc.vite updates in the other issue I have both running good locally, and pushing code to my server set to production mode is working good too.

One thing I haven't been able to do yet is to see css background images while in dev mode locally... Im assuming its a path I have to edit in the config but am new to vite, any suggestions?

[TommyKolkman]

This is a problem for me too. Any idea?

[szyam]

Unfortunately no, I experimented a bit but did not have luck. Ive used for two small projects and neither had many bg images so I worked around it. Still trying to add css source maps as well.

[j3hn]

does this answer help? #7 (comment)

[animexxx]

Still unstable, the background image not working and the import script and style on production got error also. i think im back to tailpress
update fix:
put the image background like this: /wp-content/themes/wp-theme-vite-tailwind-main/assets/img/your_image_url.jpg
in inc.vite.php replace block with:
` if (is_array($manifest)) {
// get first key, by default is 'main.js' but it can change
//$manifest_key = array_keys($manifest);

        foreach (@$manifest['main.js']['css'] as $css_file) {
            wp_enqueue_style('main', DIST_URI . '/' . $css_file);
        }

        // enqueue main JS file
        $js_file = @$manifest['main.js']['file'];
        if (!empty($js_file)) {
            wp_enqueue_script('main', DIST_URI . '/' . $js_file, JS_DEPENDENCY, '', JS_LOAD_IN_FOOTER);
        }
    }`

[szyam]

I tried a few different things, but wasn't finding a good method. Just recently I tried just letting the 'wp-content' version roll through my build, I received an error that the files were not created and left alone, which is fine since I dont want my images being rebuilt every time, but when I deployed it worked as expected. So, my current css variables look like this:

--gray-texture: url('/wp-content/themes/redwood-living/assets/icons/grey-bg-texture.svg');
--wood-texture: url('/wp-content/themes/redwood-living/assets/icons/prefooter-texture.svg');
--top-texture: url('/wp-content/themes/redwood-living/assets/icons/top-texture.svg');

This is being rendered in my built css file, now Im going to try to remove the warning from my build process.