欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vant定制主题

程序员文章站 2022-06-01 13:41:28
...

因为项目需要进行vant的主题定制,现将实现方法及遇到的问题做记录,避免之后重复同样的错误。
vant使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目,所以开始先以Vue Cli 3的方式进行相应配置。
前期准备:
1、vant推荐自动按需引入组件 ,所以先安装babel-plugin-import
npm i babel-plugin-import -D

vue cli 3中在 babel.config.js 文件中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

vue cli 2在*.babelrc*文件中配置

"plugins": [
    [
      "import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      },
      "vant"
    ]
  ]

2、安装less、less-loader
npm install less less-loader --save
3、样式变量
Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。
所有可用的颜色变量请参考 配置文件

Vue Cli 3

1、引入样式源文件

// 在 babel.config.js 中配置按需引入样式源文件
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
};

2、修改样式变量
vant定制主题

// 在 vue.config.js 中修改样式变量
css: {
   loaderOptions: {
       less: {
           modifyVars: {
           /* less 变量覆盖,用于自定义 vant 主题 */
            'text-color':'#ccc'
           }
        }
    }
}

3、重启项目

Vue Cli 2

1、在main.js引入less文件
vant定制主题

import 'vant/lib/index.less'

2、修改build/utils.js文件
vant定制主题

less: generateLoaders('less', {
   modifyVars: {
      'button-default-color': 'orange'
   },
   javascriptEnabled: true
}),

3、重启项目

看着十分简单,但是我实际操作过程中,遇到如下问题:
1、自己写的全局变量可以修改成功,vant的样式变量无法修改成功
原因:没有在main.js中引入less文件
2、引入less文件后,报错显示如下:
vant定制主题
查找后确认原因如下:
因为之前配置less、less-loader是在webpack.base.config.js下,所以,我先在webpack.base.config.js配置了

//module下的rules
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

新版本的vue-cli已经帮我们把less-loader配置好了,放在了util.js里面。
在webpack.base.config.js中去配置这段代码,导致了配置重复。

参考:
1、https://youzan.github.io/vant/#/zh-CN/theme#bu-zou-yi.-yin-ru-yang-shi-yuan-wen-jian
2、https://vue.ant.design/docs/vue/customize-theme-cn/
3、https://blog.csdn.net/baidu_41601048/article/details/100173818
4、https://www.jianshu.com/p/e5fe3598c944

相关标签: vant 定制主题