Ant Design【Ant Design Vue】 通过Vue-cli 3 配置主题不生效或报错

vue-cli 3+ 配置

// vue.config.js 文件
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',  // 要重新定义的less变量【无@符】
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true, // 不可省略必须为true否则不生效！
        },
      },
    },
  },
};

在mian中引入的是less文件！！！
在mian中引入的是less文件！！！
在mian中引入的是less文件！！！

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'
Vue.use(Antd)

报错一

语法错误：this.getOptions is not a function

原因

less-loader 版本过高引起了【2021-7-25 默认安装less-loader 为 @10.0.1版本，运行报错】

报错二：

Syntax Error:

    position: absolute;
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
  ^
Operation on an invalid type
      Error in E:\myTest\mytest\node_modules\ant-design-vue\lib\alert\style\index.less (line 29, column 4)

原因

less 在第 7 版本改变了原有的除法运算，所以无法识别

解决

npm remove less-loader 【移除高版本less-laoder】

npm i less-loader@6 -D 【指定安装 less-loader 6 版本】

重启项目