Vue项目中CSS带引号URL失效，JS如何设置cursor属性？

问题场景与现象 #

在使用Vue + Vuetify + node-sass的项目中，给cursor或background-image属性的url()传入带引号的路径时，资源无法正常加载；但去掉引号后就能正常生效。

CSS示例：

/* 生效写法 */
#app {
  cursor: url(../public/graphics/Nights_Edge.png), auto;
}

/* 不生效写法 */
#app {
  cursor: url('../public/graphics/Nights_Edge.png'), auto;
}

/* 同样不生效写法 */
#app {
  cursor: "url(../public/graphics/Nights_Edge.png)", auto;
}

后续遇到的JS设置问题：尝试通过JS直接设置cursor时，原写法报错，不知道如何正确传递路径：

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

原因与解决方案 #

原因分析 #

node-sass对CSS url()语法的解析存在局限：它会将url()内部带引号的路径识别为普通字符串，不会将其作为资源路径进行解析处理，导致编译后无法正确定位到文件。

CSS层面解决方案 #

直接使用不带引号的url()路径写法，这是node-sass能正确识别的格式，确保路径指向正确即可。

JS层面解决方案 #

JS设置行内样式时，需要注意两个关键点：

1. 路径改为根目录绝对路径：Vue项目的public目录下的资源，最终会被复制到打包后的根目录，所以直接用/graphics/Nights_Edge.png即可（省略../public前缀）。
2. url()内部不需要加引号，语法符合标准CSS即可。

正确代码示例：

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

内容的提问来源于stack exchange，提问作者Patryk Dajos