【框架】Vue 3.2.38 + ant-design-vue 3.2.12 + less 4.1.3
听说Vue 3可以在CSS里面使用JS变量，刚好项目里面需要用到，二话不说，决定尝尝鲜。
但是在使用的时候却遇到一个问题，代码是按照官方示例写的，但是一直没效果，打开控制台查看显示 xxx is not defined。
报错图
反复检查了代码，确认变量已经在JS里面定义了，而且代码写的也没问题，于是又上网查找其他答案。有的说是需要在<style>标签里面用vars定义，再在CSS里面使用，但这个是旧的写法，新的Vue版本已经不支持。有的说是less跟less-loader的版本冲突问题，不过卸掉重装也不行。我也想过是不是less语言或者scope作用域的问题，但是单纯在<style>里面调用也不成功。
然后又继续查找，最后终于通过在控制台里面查看元素发现了端倪，那就是因为我是在<a-modal>里面使用变量，而<a-modal>默认是挂载到<body>的最外层，跟<div id="app">同级，也就是说，使用变量的地方已经超出了Vue的作用域范围，所以引用不到。
【解决方法】将<a-modal>挂载到<div id="app">之内就行。
真是几经波折，想破脑袋呀。不过有时就是这样，当前的问题并不是由当前的事情引起的，而是因为其他原因所导致。
