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

ant-design-vue 自定义主题

本博主验证的环境是：

1. node v14.17.1
2. @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',
	         		'border-radius-base':0,
	        		'body-background': '#fff',
	      			'layout-body-background': '#fff',
	         		},
		         javascriptEnabled: true,
		      },
		    }
		}

}

方法二：自定义less文件覆盖原有的less变量

1.在assets文件中创建一个自定义主题的less文件，并引入ant-design-vue的less文件

// 一定要引入 mode_modules 文件中的less文件！！！！！【否则会报下文的报错2信息】

@import '../node_modules/ant-design-vue/dist/antd.less'; 	[@import后要有空格，末尾要加分号。否则可能报错]

// 自定义变量

@border-radius-base:0;

2、配置nuxt.config.js 文件

css:[
	//将原有默认引入的 ant-design-vue/dist/antd.css 注释掉
	// 全局引入自己自定义的主题文件
	{
		src:'~/assets/index.less',  
		lang:'less'
	}

]
build：{
	loaders:{
		      less: {
		        javascriptEnabled: true,
		      },
		    }
		}
}

报错处理

1、.bezierEasingMixin(); 问题

解决：

在nuxt.config.js的build中配置以下属性

build: {
	.......
		loaders:{
		      less: {
		        javascriptEnabled: true,
		      },
		    }
		}
	.......

2、Module build failed (from ./node_modules/less-loader/dist/cjs.js): friendly-errors 10:43:58

@import ‘ant-design-vue/dist/antd.less’;
^
Can’t resolve ‘./ant-design-vue/dist/antd.less’ in ‘D:\project\assets’

原因

找不到ant-design-vue的less文件

解决

要引入mode_modules中的less文件

@import '../node_modules/ant-design-vue/dist/antd.less';

如果按照以上方式配置还是报错那就请使用 less 3版本 和 less-loader 4 版本

@vue/cli 4.5.13中运行nuxt.js疯狂报警告问题解决

警告：

Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the “loose” mode option was set to “true” for @babel/plugin-proposal-private-methods.
The “loose” option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding

解决：

配置nuxt.config.js 文件

 babel:{
       plugins:[
         ["@babel/plugin-proposal-private-methods", { "loose": true }],
       ],
    },