笔者在Ant Design Vue文档中没找到关于在Vite项目中自定义主题的配置,经过一番研究发现与Vue-cli3配置大同小异便随手记录下来。

步骤

  1. 安装less(已下载的同学可以跳过)
    npm install --save-dev less

  2. 将main.ts(js)中的import 'ant-design-vue/dist/antd.css' 改为 import 'ant-design-vue/dist/antd.less'

  3. 编辑项目根目录的vite.config.ts(js),modifyVars属性对应的就是自定义的颜色值

    export default{
    	...
    	css: {
    	    preprocessorOptions: {
    	      less: {
    	        modifyVars: {
    	          'primary-color': '#123',
    	          'link-color': 'red',
    	        },
    	        javascriptEnabled: true,
    	      }
    	    },
    	  },
    	...
    }
    
  4. 刷新页面即可生效(项目正在运行的情况不刷新也会自动更新生效)

Logo

前往低代码交流专区

更多推荐