less/sass中变量通过js动态修改（基于css var变量方式）

<script>

    mounted(){

        const bgImgUrl = this.APP?.options?.login?.bgImgUrl;

        bgImgUrl && document.querySelector(':root').style.setProperty('--bgImgUrl', `url(${bgImgUrl})`); //注意：此处必须拼接url，才会重新请求图片

    },

</script>

<style lang="less">

@bgImgUrl:  var(--bgImgUrl, url("../../../assets/images/bg-img-login.jpg")); //--bgImgUrl不存在则使用默认值

.template-login-tech {

    background-image: @bgImgUrl;  //此处直接放 var(--bgImgUrl, url("../../../assets/images/bg-img-login.jpg”));也可以

    background-size: cover !important;

</style>

拓展：

less转义字符～：

某些时候，当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值，任何 ~"text" 被编译成 CSS 代码后，都将显示为 text。

例如 border-radius 属性，在 CSS 中我们可以使用斜杆 / 来设置属性值，/ 前面的是水平半径，后面的是垂直半径。但是在 Less 中，则不支持使用 / :

.box{   border-radius: 0px 25px 25px 0 / 0 25px 25px 0px; }

上面写法报错SyntaxError，解决办法～转译/ ：  border-radius: 0px 25px 25px 0 ~"/" 0 25px 25px 0px;

less calc：

height:calc(~"100% - 50px");

document.qurySelector(); //返回匹配指定选择器的第一个元素

 var root = document.querySelector(':root'); //获取根元素，等价于document.documentElement

var node = document.querySelector("#lover");   // 获取文档中的第一个id=lover的元素

var node = document.querySelector(".lover");   // 获取文档中的第一个class="lover"的元素

var node = document.querySelector("p.lover");  // 获取class=“lover” 的第一个p元素

var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素

var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素