详解基于Vue cli开发修改外部组件Vant默认样式

前言

在引入外部组件的时候，想要修改默认样式，可以通过class修改，但一般会有权重不够等各种原因，官网其实列出了一套主题定制的方案，通过覆盖配置文件来修改样式，官网地址：主题定制

提示：以下是本篇文章正文内容，下面案例可供参考

一、Less

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

给你的项目配置less：

npm install less --save-dev
npm install less-loader --save-dev

配置完先试一试less可不可以使用，如果报错，一般是因为版本高导致的。
可以试着降低版本

"less-loader": "^5.0.0",

二、引入你的组件

比如我这里引入的是Tab标签页组件

<van-tabs v-model="active">
 <van-tab title="标签 1">内容 1</van-tab>
 <van-tab title="标签 2">内容 2</van-tab>
 <van-tab title="标签 3">内容 3</van-tab>
 <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

export default {
 data() {
 return {
  active: 2,
 };
 },
};

它有默认样式，比如active的字体颜色，底部状态颜色等。

三、修改配置文件

第一步：直接引入less文件

在main.js里引入：

import 'vant/lib/index.less';

第二步：修改样式变量

找到你的vue.config.js文件，没有就在package.json同级新建一个配置文件，添加一下代码：

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文件引入，注意，如果less版本低的话，按照代码中的注释来。
再回到之前标签组件的使用文档，往下滑找的样式变量这一部分

那么它定义的一些关于组件的样式，你可以对着它的名字来修改你需要修改的样式，比如@tab-active-text-color这一个变量，应该就是表示active状态后字体的颜色，好，我现在需要将它修改为我想要的颜色，那么就在配置文件中修改一下

再重启下服务器，就可以看到组件的样式改变了

总结

到此这篇关于详解基于Vue cli开发修改外部组件Vant默认样式的文章就介绍到这了,更多相关Vuecli Vant默认样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

  • 详解基于vue的移动web app页面缓存解决方案

    现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的

  • 详解基于Vue+Koa的pm2配置

    详解基于Vue+Koa的pm2配置

    目前使用的技术栈是:前端Vue.后端Koa.数据库Mongodb. 然而每当起服务的时候,都要 npm start . node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦. 而且因为我使用的是koa,也没有使用狼叔写的koa脚手架.是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc.导致没有热更新. 为了简化这种没必要的操作及增加热更新,开始想怎么进行优化.于是选择了 pm2 配置pm2 先安装pm2: npm i pm2 . npm i pm2 -g

  • 详解基于Vue，Nginx的前后端不分离部署教程

    详解基于Vue，Nginx的前后端不分离部署教程

    有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

  • 详解基于vue的服务端渲染框架NUXT

    Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    前言 想必大家都看过fullpage.js--这是一款非常好用的翻页插件. 现在vue非常流行,大家想不想发布一个组件给别人使用呢? 这里我们基于vue-cli3快速搭建一个简单的fullpage组件给别人使用,当然你也可以做你感兴趣的组件发布给别人用~ GITHUB 链接 开始 准备 $ npm i -g @vue/cli #全局vue-cli3 通过查看vue-cli3官网了解,创建一个新的普通项目. 思考 一开始要想别人如何调用我们写的组件,通过挂载vue实例方法(this.$alert)

  • 详解基于Vue/React项目的移动端适配方案

    详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • 详解基于Vue的支持数据双向绑定的select组件

    今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

随机推荐