Url loader with JQuery UI Error - resolve-url-loader: CSS error Invalid mapping

I am having some issues with my project when trying to import JQuery UI css files. I have added the following to my projects' App.scss file.

@import url("../node_modules/jquery-ui/themes/base/all.css");

When I try to build my web application (react/typescript) I get the following error.

> ./src/App.scss Error: resolve-url-loader: CSS error   Invalid mapping:
> {"generated":{"line":10,"column":538},"source":"file://C:\\Jenkins\\workspace\\MyWebApp\\node_modules\\jquery-ui\\themes\\base\\base.css","original":{"column":null},"name":null}

Whats strange is when I open look in base.css which is the file the error is being thrown I can see that there are additional imports all being imported with the format - @import url("file.css")

When I adjust the imports in base.css to the format - @import "file.css" then the application builds successfully.

Can anyone explain why this is happening or how to fix this without modifying the package directly? I am not that familiar with resolve-url-loader

Start by reproducing the build from src/App.scss with jquery-ui/themes/base/all.css and the reported resolve-url-loader error. Inspect the nested imports in base.css and how resolve-url-loader handles their source mappings. Done means identifying a reproducible cause and a workaround that builds without modifying the installed package.