nuxt配置ant-design-vue主题颜色
nuxt内部集成自带ant-design-vue,但是没有解释如何配置主题颜色,根据官方网站配置下来,可能存在一些问题,简单记录一下
当前写作时文档只适用于nuxt版本^2.15.7
安装 less less-loader
npm install less@3.13.1 less-loader@7.3.0 -D
// or
yarn add less@3.13.1 less-loader@7.3.0 -D
注意,必须安装这个版本的,less3.13.1是less3版本的最后一个版本,7.3.0是less-loader7版本的最后一个版本
如果你不带版本好,编译100%会报错!!!版本差异有问题
修改nuxt配置文件 nuxt.config.js
css: ['ant-design-vue/dist/antd.css'],
改为
css: [
// '@/assets/css/app.css'
{
src: 'ant-design-vue/dist/antd.less',
lang: 'less'
}
],
build: {
loaders: {
less: {
lessOptions: {
strictMath: false,
javascriptEnabled: true,
modifyVars: {
'primary-color': '#E2B801', // 全局主色
'link-color': '#E2B801', // 链接色
'success-color': '#52c41a', // 成功色
'warning-color': '#faad14', // 警告色
'error-color': '#f5222d', // 错误色
'font-size-base': '14px', // 主字号
'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
'border-radius-base': '4px', // 组件/浮层圆角
'border-color-base': '#d9d9d9', // 边框色
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
}
}
}
}
}