Ant Design Vue自定义主题失效解决办法
- Vue学习
- 2022-06-20
- 1387热度
- 0评论
自定义主题
antd 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,可以根据需求进行相应调整 。
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@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); // 浮层阴影
vite处理如下
// css预处理器
preprocessorOptions: {
less: {
// 替换antd的主题
modifyVars: theme,
//这个不能少
javascriptEnabled: true
}
}
//theme如下
export default {
"@primary-color": "#6d18ff", // 全局主色
"@link-color":"#ff18e0", // 链接色
"@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)" // 浮层阴影
}
或者这样也可以:
这个后来亲测无效,干。
// css预处理器
preprocessorOptions: {
less: {
// 此处修改为要被预处理的scss文件地址
additionalData: '@import "@/asstes/theme.less";'
}
}
Less官网:https://lesscss.org/
问题记录、解决
使用antd design,同时使用了自动导入组件的插件(unplugin-vue-components),导致修改的less变量无法生效;在插件文档里没有找到相关说明,然后翻了一下源代码。如下:
export interface AntDesignVueResolverOptions {
/**
* import style along with components
*
* @default 'css'
*/
importStyle?: boolean | 'css' | 'less'
}
默认导入的是css,所以需要改一下配置:
/*自动导入组件*/
Components({
resolvers: [AntDesignVueResolver({
importStyle:'less'
})],
}),
然后重新npm run dev,报错如下:
ERROR 下午10:05:21 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options?
最后发现是因为我用的js导入的less,所以预处理器需要启用js,直接导入less,应该不需要。
// css预处理器
preprocessorOptions: {
less: {
// 替换antd的主题
modifyVars: theme,
javascriptEnabled: true
}
}
重新运行,一切OK。