自定义主题 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";'
} }
问题记录、解决 使用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。
