Image Url passed to Less variable not visible

Hi,

I’ve created a custom widget as per your documentation and I have a field for a background image which needs to be pushed to a LESS variable.

I’ve included the following in the main Widget Class

function get_less_variables( $instance ) {
        return array(
            "bg_image1" => wp_get_attachment_image_url($instance['slider_image1']),
            "bg_image2" => wp_get_attachment_image_url($instance['slider_image2'])
        );
    }

And also have the following in LESS file

bg_image1: "http://mysite.test/minisite/wp-content/uploads/sites/2/2018/05/MainPhoto_1-2-150x150.jpg";
@bg_image2: "http://mysite.test/minisite/wp-content/uploads/sites/2/2018/05/MainPhoto_1-2-150x150.jpg";
@media only screen and (max-width: 320px) {
    #slider0 {background-image: url( "@{bg_image1}" );}
    #slider1 {background-image: url( "@{bg_image2}" );}
}
@media only screen and (min-width: 1025px) {
    #slider0 {background-image: url( "@{bg_image1}" );}
    #slider1 {background-image: url( "@{bg_image2}" );}
}

And the image URL doesnt turn up. However, if I remove wp_get_attachment_image_url from the main class I’m able to see the Attachement ID come up in the CSS generated. Weird, I’ve tried other functions too but I’m unable to get the image URL shown in the LESS file. Is there a way for me to Debug the LESS compilation, any pointers will be helpful.

Thanks in advance.
Abyshakes