Vite+vue2+antdv 1x 定制主题 和 less问题

浏览:879次阅读
没有评论

前言

在 Vue 2 中使用 Vite 和 Ant Design Vue(antdv)并自定义主题颜色,你需要遵循以下步骤:

1. 安装依赖:

使用 npm 或 yarn 安装所需的依赖:

   npm install --save ant-design-vue@1.x
   npm install --save-dev  less@3 less-loader

   yarn add ant-design-vue@1.x
   yarn add --dev  less@3 less-loader

less@3 才行哦 如果是 less4 可能会报错格式问题

  1. 配置 Vite:

    在项目根目录下创建或编辑 vite.config.js 文件,添加以下内容:

    import {createVuePlugin} from 'vite-plugin-vue2';
    
    export default {
     plugins: [createVuePlugin()
     ],
     css: {
       preprocessorOptions: {
         less: {
           modifyVars: {
             // 在此处自定义主题变量
             'primary-color': '#1DA57A',
             'link-color': '#1DA57A',
             'border-radius-base': '2px',
             // 或者引入自定义主题
             // hack: true; @import (reference) "${resolve('src/style/theme.less')}";,
           },
           javascriptEnabled: true,
         },
       },
     },
    };

    这里我们使用了 vite-plugin-style-import 插件来按需加载 antdv 的样式,并使用 lessless-loader 来处理和自定义主题颜色。

  2. 在项目中引入和使用 Ant Design Vue:

    在你的 Vue 2 项目的入口文件(通常是 main.jsmain.ts)中,引入并使用 Ant Design Vue:

    import Vue from 'vue';
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.less'; // 修改定制主题这里必须是引入 lses
    
    Vue.use(Antd);

    Vite+vue2+antdv 1x 定制主题 和 less 问题
    现在你已经成功地在 Vue 2 项目中使用了 Vite 和 Ant Design Vue,并自定义了主题颜色。你可以在 vite.config.js 文件中的 modifyVars 对象里修改更多的主题变量。更多关于 Ant Design Vue 主题定制的信息,请参考官方文档:https://1x.antdv.com/docs/vue/customize-theme-cn/

正文完
 1
包子
版权声明:本站原创文章,由 包子 于2023-05-30发表,共计1063字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)