为何此组件内,使用less的变量【background: var(--primary-color);】不起作用呢?

代码路径如下:
https://github.com/sendya/preview-pro/blob/main/src/components/SettingDrawer/SettingDrawer.vue
代码片段如下:
<style lang="less">
.ant-pro-setting-drawer-handle {
position: absolute;
top: 240px;
right: 300px;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 16px;
text-align: center;
**background: var(--primary-color);**
border-radius: 4px 0 0 4px;
cursor: pointer;
pointer-events: auto;
> span {
color: rgb(255, 255, 255);
font-size: 20px;
}
}
</style>
为何此组件内,使用less的变量【background: var(--primary-color);】不起作用呢?
代码路径如下:
https://github.com/sendya/preview-pro/blob/main/src/components/SettingDrawer/SettingDrawer.vue
代码片段如下: