nuxt.js 使用ant-design-vue 自定义主题配置及错误处理及@vue/cli 4.5.13中nuxt.js警告问题【2021-8-6】

最新推荐文章于 2025-06-27 21:15:00 发布

原创

最新推荐文章于 2025-06-27 21:15:00 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #less #vue #ant

本文档详细介绍了在Node v14.17.1和@vue/cli 4.5.13环境下，如何在Nuxt.js项目中自定义Ant Design Vue的主题。方法一是直接在nuxt.config.js中配置less变量，方法二是创建自定义less文件覆盖原有变量。同时，文章还提供了针对.bezierEasingMixin()错误和找不到antd.less文件的解决办法，并给出了@vue/cli 4.5.13在Nuxt.js中遇到的警告处理方案。

ant-design-vue 自定义主题

本博主验证的环境是：

node v14.17.1
@vue/cli 4.5.13

less less-loader 版本建议：

npm i less@3 -D
npm i less-loader@4 -D

方法一：nuxt.config.js 中配置自定义less变量

配置nuxt.config.js 文件中的 css属性和 build 属性

css:[
	{
   
   
		src:'ant-design-vue/dist/antd.less', // 一定引入less文件否则自定义颜色不生效！！！
		lang:'less'
	}
]
build:{
   
   
	loaders:{
   
   
		      less: {
   
   
			      modifyVars: {
   
   
			      	 // 可参考官网定制主题之在 vue cli 3 中定制主题 
	          		'link-color': '#333',