Ant Design Vue自定义主题失效解决办法

自定义主题

antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，可以根据需求进行相应调整 。

官方说明

https://antdv.com/docs/vue/customize-theme-cn

@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。