您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vant 主题定制

Vant 提供了一套认,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换色或者其他样式,可以使用下面提供的。

我们提供了基于 Vue Cli 3 的示例工程,仓库地址为 ,其中包含了定制的基本配置,可以作为参考。

Vant 使用了  对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的。

下面是一些基本的样式变量,所有可用的颜色变量请参考 。

// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f7f8fa;
@background-color-light: #fafafa;

Vant 定制

接下来讲解vant定制,分为两个步骤:

定制时,需要引入组件对应的 Less 样式,按需引入和手动引入两种方式。

在 babel.con.js 中配置按需引入样式源,注意 babel6 按需引入样式,请手动引入样式

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};
// 引入全部样式
import 'vant/lib/index.less';

// 引入单个组件样式
import 'vant/lib/button/style/less';

使用 Less 提供的  即可对变量进行,下面是参考的 webpack 配置。

// webpack.con.js
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他 loader 配置
        {
          loader: 'less-loader',
          options: {
            // 若使用 less-loader@5,请移除 lessOptions 这一级,直接配置选项。
            lessOptions: {
              modifyVars: {
                // 直接覆盖变量
                'text-color': '#111',
                'border-color': '#eee',
                // 或者可以通过 less 覆盖(路径为)
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ],
    },
  ],
};

如果 vue-cli 搭建的项目,可以在 vue.con.js 中进行配置。

// vue.con.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若使用 less-loader@5,请移除 lessOptions 这一级,直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 覆盖(路径为)
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

联系我
置顶