自定義主題

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

官方說(shuō)明

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

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 鏈接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯(cuò)誤色
@font-size-base: 14px; // 主字號(hào)
@heading-color: rgba(0, 0, 0, 0.85); // 標(biāo)題色
@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預(yù)處理器
preprocessorOptions: {
       less: {
             // 替換antd的主題
             modifyVars: theme,
             //這個(gè)不能少
             javascriptEnabled: true
        }
}

//theme如下
export default {
    "@primary-color": "#6d18ff", // 全局主色
    "@link-color":"#ff18e0", // 鏈接色
    "@success-color":"#52c41a", // 成功色
    "@warning-color":"#faad14", // 警告色
    "@error-color":"#f5222d", // 錯(cuò)誤色
    "@font-size-base":"14px", // 主字號(hào)
    "@heading-color":"rgba(0, 0, 0, 0.85)", // 標(biāo)題色
    "@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)" // 浮層陰影
}

或者這樣也可以：

這個(gè)后來(lái)親測(cè)無(wú)效，干。

// css預(yù)處理器
preprocessorOptions: {
   less: {
       // 此處修改為要被預(yù)處理的scss文件地址
       additionalData: '@import "@/asstes/theme.less";'
   }
}



Less官網(wǎng)：https://lesscss.org/

問(wèn)題記錄、解決

使用antd design，同時(shí)使用了自動(dòng)導(dǎo)入組件的插件（unplugin-vue-components），導(dǎo)致修改的less變量無(wú)法生效；在插件文檔里沒(méi)有找到相關(guān)說(shuō)明，然后翻了一下源代碼。如下：

export interface AntDesignVueResolverOptions {
  /**
   * import style along with components
   *
   * @default 'css'
   */
  importStyle?: boolean | 'css' | 'less'
}

默認(rèn)導(dǎo)入的是css，所以需要改一下配置：

/*自動(dòng)導(dǎo)入組件*/
Components({
    resolvers: [AntDesignVueResolver({
        importStyle:'less'
    })],
}),

然后重新npm run dev，報(bào)錯(cuò)如下：

ERROR  下午10:05:21 [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options?     

最后發(fā)現(xiàn)是因?yàn)槲矣玫膉s導(dǎo)入的less，所以預(yù)處理器需要啟用js，直接導(dǎo)入less，應(yīng)該不需要。

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

重新運(yùn)行，這樣子就可以了