ant-design-vue提示@shadow-color丢失

ERROR Failed to compile with 1 error 11:07:31

error in ./src/styles/index.less

Syntax Error:

&::before {
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
^
Error evaluating function `darken`: Argument cannot be evaluated to a color
Error in D:\Desk\wdu\wdu-main\node_modules\ant-design-vue\lib\table\style\index.less (line 832, column 42)


@ ./src/styles/index.less 4:14-228 15:3-20:5 16:22-236
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:7001&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

node版本23，使用yarn4.9.1安装提示该错误

第一种解决方案（大概率不会生效）： 使用npm安装，并运行set NODE_OPTIONS=--openssl-legacy-provider

第二种解决方案（第一种无效可尝试）：根据报错升级最新包

// vue.config.js 或 webpack 配置

module.exports = {

　　css: {
  　　loaderOptions: {
    　　less: {

 　　　　　　lessOptions: { modifyVars: { 'shadow-color': '#000000', // ✅ 颜色值  },
　　　　　　 javascriptEnabled: true }
　　　　}
　　}
}

 

在styles下新建文件，补充丢失的变量，绝对路径D:\Desk\item\src\styles\antd-override.less

随后在styles下的index.less用引入@import "./antd-override.less";

yarn add -D file-loader
yarn add core-js@3

yarn add -D babel-loader @babel/core @babel/preset-env

同时修改babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: "defaults", // 或根据需要设置支持的浏览器范围
      // 启用对最新ES语法的支持
      // 这个preset会自动支持包括 ?? 在内的最新语法
    }]
  ],
};

第三种解决方案（第二种无效可尝试）：锁定core-js（node16下）

npm install
npm install core-js@^3 --save

第四种解决方案（100%生效）：直接替换源文件

这是近期的一个项目的参考，放在这里https://chatgpt.com/c/6854cf44-e700-800d-bde9-d6c76714d01d

最后推荐一篇文章，根据该篇文章收到启发，https://blog.csdn.net/apol/article/details/114356994