jquery
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
Maybe not using the url() wrapper would help? In any case, it looks like a tooling issue and seeing jQuery UI 1.12.1 is identical here, given limited team resources it's not likely to be modified by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/.
