使用Vant定制主题

您所在的位置：网站首页 › vant组件按需引入 › 使用Vant定制主题

使用Vant定制主题

2023-11-12 18:42| 来源: 网络整理| 查看: 265

Vant定制主题的核心原理

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。

定制方法

定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。

1.引入样式源文件

main.js里面

// 导入并安装 Vant 组件库 import Vant from 'vant' // 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less import 'vant/lib/index.less' 2.修改样式变量

使用 Less 提供的 modifyVars 即可对变量进行修改，下面是参考的 webpack 配置。（自己手动搭建的webpack）

// webpack.config.js module.exports = { rules: [ { test: /\.less$/, use: [ // ...其他 loader 配置 { loader: 'less-loader', options: { // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。 lessOptions: { modifyVars: { // 直接覆盖变量 'text-color': '#111', 'border-color': '#eee', // 或者可以通过 less 文件覆盖（文件路径为绝对路径） hack: `true; @import "your-less-file-path.less";`, }, }, }, }, ], }, ], };

如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。 //配置vue,config.js文件(与src目录同级) vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js /** * @type {import('@vue/cli-service').ProjectOptions} */ module.exports = { // 选项... } // vue.config.js module.exports = { css: { loaderOptions: { less: { // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。 lessOptions: { modifyVars: { // 直接覆盖变量 'text-color': '#111', 'border-color': '#eee', // 或者可以通过 less 文件覆盖（文件路径为绝对路径） hack: `true; @import "your-less-file-path.less";`, }, }, }, }, }, }; less(可编程式语言)的正确打开方式

变量（Variables）无需多说，看代码一目了然：

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

编译为

#header { width: 10px; height: 20px; } 推荐使用theme.less定制主题

修改服务器需重新打包，所以不建议在服务器中修改。在src目录下创建theme.less文件举例：

// 在 theme.less 文件中，覆盖 Vant 官方的 less 变量值 @blue: #007bff; // 覆盖 Navbar 的 less 样式 @nav-bar-background-color: @blue; @nav-bar-title-text-color: #fff;

使用：

// 这个文件是 vue-cli 创建出来的项目的配置文件 // 在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置 // webpack 在进行打包的时候，底层用到了 node.js // 因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块 const path = require('path') const themePath = path.join(__dirname, './src/theme.less') module.exports = { publicPath: './', css: { loaderOptions: { less: { modifyVars: { // 直接覆盖变量 // 'nav-bar-background-color': 'orange', // 或者可以通过 less 文件覆盖（文件路径为绝对路径） // ../ ./ theme.less // 从盘符开始的路径，叫做绝对路径 C:\\Users\liulongbin\\theme.less hack: `true; @import "${themePath}";` } } } } }

【本文地址】

使用Vant定制主题

使用Vant定制主题

今日新闻

推荐新闻