My CSS in a Vue Project doesn't accept quoted URLs-CodePudding

As the title says, when I pass over a quoted URL to background-image or cursor, it simply doesn't load the file.
I work with Vue and have the following libraries installed: Vuetify, SASS, SASS-Loader, Node-SASS.
I cannot uninstall Node-SASS as my project fails to run without it.

Here are some examples:

// This works
#app {
  cursor: url(../public/graphics/Nights_Edge.png), auto;
}
// This doesn't work
#app {
  cursor: url('../public/graphics/Nights_Edge.png'), auto;
}
// This also doesn't work
#app {
  cursor: "url(../public/graphics/Nights_Edge.png)", auto;
}

My follow up question is, how do I pass over such a URL with Javascript, if a quoted URL doesn't load?
What I tried to do:

document.getElementById("app").style.cursor = "url(../public/graphics/Nights_Edge.png) auto";

Obviously deleting the quote marks leaves me in a sea of red.

CodePudding user response：

Just to close this post.
I have not found an answer how to fix this issue but I this work-around works for me.

document.getElementById("app").style.cursor = 'unset';

body {
  cursor: url("./image.png"), auto;
}
#app {
  cursor: auto;
}

with ID "app" being the child of body.

CodePudding user response：

You an escape the semantics of quotation marks within the javascript language using the \ character. This basically means that 'escaped' quotation marks are just treated as " characters in your string, instead denoting the beginning and end of the actual string in your code. This allows you to add quotation marks in your quoted text:

document.getElementById("app").style.cursor = "url(\"../public/graphics/Nights_Edge.png\"), auto";