自定義主題

antd 的樣式使用了 Less 作為開發(fā)語言，并定義了一系列全局/組件的樣式變量，可以根據(jù)需求進行相應調整 。

官方說明

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?     

最后發(fā)現(xiàn)是因為我用的js導入的less，所以預處理器需要啟用js，直接導入less，應該不需要。

// css預處理器
preprocessorOptions: {
    less: {
        // 替換antd的主題
        modifyVars: theme,
        javascriptEnabled: true
    }
}

重新運行，這樣子就可以了