欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3+vite+antd如何實現(xiàn)自定義主題

 更新時間：2024年03月21日 11:03:50   作者：幸福淺曖  
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、首先需要下載less、less-loader

npm i less less-loader --save

二、main.ts中引入antd樣式的地方要改為.less

//不要使用 import "ant-design-vue/dist/antd.css";
//注意要使用.less
import "ant-design-vue/dist/antd.less"

三、vie.config.ts文件，找css配置項

加入以下代碼

modifyVars中即為你需要自定義的主題字段

主題樣式字段可從antd官網(wǎng)查找 antd官網(wǎng)-自定義主題，根據(jù)說明改成你自己的樣式即可

// modifyVars即為你需要修改的主題
css: {
	preprocessorOptions: {
		less: {
			modifyVars: {
				'primary-color': '#FF763B',
				'border-color-base': '#FF763B',
				'box-shadow-base': '0 2px 8px #FF763B'
			},
			javascriptEnabled: true,
		},
	}
}

注意：

  • 1、一定要下載less、less-loader包
  • 2、main.ts中引入antd樣式的地方一定要改為.less

如果未生效

請先檢查注意中的兩個點

如果配置了按需引入，需要對 unplugin-vue-components 包

在vite.config.ts做配置

npm i unplugin-vue-components

vite.config.ts引入組件并配置

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [
      	AntDesignVueResolver({ 
      		importStyle: 'less' 
      	})
      ]
    })
  ]
})

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論