【框架】Vue 3.2.38 +?ant-design-vue 3.2.12 + less 4.1.3
聽說Vue 3可以在CSS里面使用JS變量，剛好項(xiàng)目里面需要用到，二話不說，決定嘗嘗鮮。
但是在使用的時(shí)候卻遇到一個(gè)問題，代碼是按照官方示例寫的，但是一直沒效果，打開控制臺(tái)查看顯示 xxx is not defined。
報(bào)錯(cuò)圖
反復(fù)檢查了代碼，確認(rèn)變量已經(jīng)在JS里面定義了，而且代碼寫的也沒問題，于是又上網(wǎng)查找其他答案。有的說是需要在<style>標(biāo)簽里面用vars定義，再在CSS里面使用，但這個(gè)是舊的寫法，新的Vue版本已經(jīng)不支持。有的說是less跟less-loader的版本沖突問題，不過卸掉重裝也不行。我也想過是不是less語(yǔ)言或者scope作用域的問題，但是單純?cè)?lt;style>里面調(diào)用也不成功。
然后又繼續(xù)查找，最后終于通過在控制臺(tái)里面查看元素發(fā)現(xiàn)了端倪，那就是因?yàn)槲沂窃?lt;a-modal>里面使用變量，而<a-modal>默認(rèn)是掛載到<body>的最外層，跟<div id="app">同級(jí)，也就是說，使用變量的地方已經(jīng)超出了Vue的作用域范圍，所以引用不到。
【解決方法】將<a-modal>掛載到<div id="app">之內(nèi)就行。
真是幾經(jīng)波折，想破腦袋呀。不過有時(shí)就是這樣，當(dāng)前的問題并不是由當(dāng)前的事情引起的，而是因?yàn)槠渌蛩鶎?dǎo)致。
