如何使用 LESS 通过 nuxt 个性化 Ant Design Vue？

问题描述

我尝试将 Ant Design Vue 与 NUXT 结合使用。 我使用命令行 npm init nuxt-app 安装 nuxt 我选择了 Ant Design Vue。 它完美运行。

但是当我尝试个性化主题 (https://www.antdv.com/docs/vue/customize-theme/) 时，它不起作用。

我用 npm 添加了 less，但是当我想添加 less-loader 时，我收到此错误消息：

npm 错误！代码 ERESOLVE npm ERR！ ERESOLVE 无法解析依赖 树 npm 错误！ npm 错误！发现：webpack@5.26.2 npm ERR！ node_modules/webpack npm ERR！对等 webpack@">=2" 来自 babel-loader@8.2.2 npm ERR！ node_modules/babel-loader npm ERR!
babel-loader@"^8.2.2" 来自@nuxt/webpack@2.15.3 npm ERR！
node_modules/@nuxt/webpack npm ERR！ @nuxt/webpack@"2.15.3" 来自 @nuxt/builder@2.15.3 npm ERR！ node_modules/@nuxt/builder npm 呃！ @nuxt/builder@"2.15.3" 来自 nuxt@2.15.3 npm ERR！
node_modules/nuxt npm ERR！还有 1 个 (nuxt) npm ERR！同行 webpack@"^4.27.0 || ^5.0.0" 来自 css-loader@4.3.0 npm ERR！
node_modules/css-loader npm ERR！ css-loader@"^4.3.0" 来自 @nuxt/webpack@2.15.3 npm ERR！ node_modules/@nuxt/webpack npm ERR！ @nuxt/webpack@"2.15.3" 来自@nuxt/builder@2.15.3 npm ERR！
node_modules/@nuxt/builder npm ERR！ @nuxt/builder@"2.15.3" 来自 nuxt@2.15.3 npm ERR！ node_modules/nuxt npm ERR！ 1 更多 (nuxt) npm ERR！来自 vue-loader@15.9.6 的 peer css-loader@"*" npm 错误！ node_modules/vue-loader npm ERR!
vue-loader@"^15.9.6" 来自@nuxt/webpack@2.15.3 npm ERR！
node_modules/@nuxt/webpack npm ERR！ @nuxt/webpack@"2.15.3" 来自@nuxt/builder@2.15.3 npm ERR！ node_modules/@nuxt/builder npm 错误！还有 1 个 (nuxt) npm ERR！还有 12 个 (extract-css-chunks-webpack-plugin,file-loader,...) npm ERR！新产品经理 呃！无法解析依赖项：npm ERR！对等 webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" 来自 @nuxt/friendly-errors-webpack-plugin@2.5.0 npm 呃！ node_modules/@nuxt/friendly-errors-webpack-plugin npm ERR!
@nuxt/friendly-errors-webpack-plugin@"^2.5.0" 来自 @nuxt/webpack@2.15.3 npm ERR！ node_modules/@nuxt/webpack npm ERR!
@nuxt/webpack@"2.15.3" 来自@nuxt/builder@2.15.3 npm ERR！
node_modules/@nuxt/builder npm ERR！ @nuxt/builder@"2.15.3" 来自 nuxt@2.15.3 npm ERR！ node_modules/nuxt npm ERR！还有 1 个 (nuxt) npm ERR！ npm 错误！修复上游依赖冲突，或 重试 npm ERR！此命令带有 --force 或 --legacy-peer-deps npm 呃！接受不正确（并且可能已损坏）的依赖项 解决。 npm 错误！ npm 错误！看 /Users/chtouk/.npm/eresolve-report.txt 获取完整报告。

npm 错误！可以在以下位置找到此运行的完整日志：npm ERR!
/Users/chtouk/.npm/_logs/2021-03-17T09_53_47_196Z-debug.log

所以我尝试使用 --force 或 --legacy-peer-deps 来解决这个问题，但是当我使用 npm run dev 运行我的应用程序时，出现了一条新的错误消息：

ERROR 规则只能有一个资源源（提供的资源和 测试 + 包含 + 排除）在 {
10:59:59 “使用”：[ { "loader": "/Applications/MAMP/htdocs/myproject/node_modules/babel-loader/lib/index.js",“选项”： { “配置文件”：假， “babelrc”：假， “缓存目录”：真， "envName": "客户端",“预设”：[ [ "/Applications/MAMP/htdocs/myproject/node_modules/@nuxt/babel-preset-app/src/index.js",{ “核心”：{ “版本”：3 } } ] ] },"ident": "clonedRuleSet-4[0].rules[0].use[0]" } ] }

"use": [ { "loader": "node_modules/babel-loader/lib/index.js",
"options": { "configFile": false,"babelrc": false,
"cacheDirectory": true,"envName": "client","presets": [ [
"node_modules/@nuxt/babel-preset-app/src/index.js",{ "corejs": { “版本”：3 } } ] ] }，“身份”： "clonedRuleSet-4[0].rules[0].use[0]" } ] }

如何修复它并个性化我的主题？

非常感谢您的帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）