vant 定制主题的使用记录

飞奔的喀纳斯蜗牛

已于 2022-10-25 09:49:08 修改

阅读量537

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vant vue 前端文章标签：前端

于 2022-10-24 18:23:26 首次发布

本文链接：https://blog.csdn.net/qq_39235090/article/details/127497991

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

vant

1 篇文章

订阅专栏

在尝试自定义Vant主题时遇到问题，官方步骤未奏效。关键在于手动引入时，LESS文件必须置于CSS目录下才能生效，否则会导致样式不应用。同时，全局引入与按需引入不能同时进行，配置babel.config.js与vue.config.js，以及创建src/theme.less文件进行主题定义，最终解决了Vant未定义的冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我也是想改vant的定制主题，按照官网一步一步来，结果不行，最后发现了盲点！！！

手动引入和按需引入二选一。如果是全局引入vant，建议手动引入。

首先main.js（手动引入）

盲点在这里，less文件必须放在css下面，不然不生效，这里把我坑惨了。

这里是手动引入，这里写了，babel文件就不要写了，否则会报Vant is not defined，起冲突。

import Vant from 'vant';
import 'vant/lib/index.css';  // 这个是引入vant需要导入的
import 'vant/lib/index.less'; // 这个是改主题需要导入的，这个必须放在下面，才生效

Vue.use(Vant);

然后babel.config.js（按需引入）

需要装@vue/cli-plugin-babel/preset，其他不变。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'  // 这个没有npm的需要装！
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

最后是vue.config.js

然后需要在src目录下建一个theme.less文件（名字随便你取），然后配置在下面就行

module.exports = defineConfig({
  
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "/src/theme.less";`,
          },
        },
      },
    },
  }
})

theme.less 内容举例

// toast
@toast-background-color: rgba(0, 178, 119, 0.7);
@toast-border-radius: 36px;
@toast-default-padding: 15px 32px;

最后，成功了