Vant主題定制如何修改顏色樣式
更新時間：2022年04月26日 08:53:37 作者：小迷糊愛麗絲
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vant主題定制修改顏色
使用場景
需要修改vant組件的顏色或其他的樣式時，可以用以下方法進行自定義修改。
一個簡單的效果：
第一種：完全替換主題色或其他樣式
用Vant官方提供的方法進行定制：
1.main.js引入樣式原文件
// 引入全部樣式 import 'vant/lib/index.less'; // 引入單個組件樣式 import 'vant/lib/button/style/less';
2.創(chuàng)建less文件
3.修改配置
用vue-cli搭建的可以直接在vue.config.js中更改配置：
const path = require("path");
//less文件的路徑
const myTheme = path.resolve(__dirname, "./src/assets/less/vantChange.less");
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
hack: `true; @import "${myTheme}";`
}
},
}
},
}
4.修改樣式
參考官網(wǎng)提供的樣式變量
第二種：直接覆蓋樣式
1.找到class類名
在控制臺選中元素，獲取class類名，雙擊選中復(fù)制
2.修改樣式
<style lang="less" scoped>
.van-sidebar-item--select::before{
background-color:#CCCCFF;
}
.van-sidebar-item--select, .van-sidebar-item--select:active{
background-color:#FFCCCC;
color:white;
}
</style>
Vant自定義主題顏色
先看效果圖
修改前：
修改后
// less文件代碼 @white: #000;
步驟方法
1、 在main.js 中引入
import 'vant/lib/index.less';
2、新建less 文件，用來覆蓋修改 框架里的顏色
3、安裝less和 less-loader， less-loader徐、需安裝5.0.0版本
npm install less --save-dev npm install less less-loader@5.0.0 --save-dev
4、在vue.config.js 文件中添加以代碼
// 需要放在module.exports對象里
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
// 此函數(shù)為方法體，需放在對象的外面
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/less/vant.less'), // 需要全局導(dǎo)入的less
],
})
}
完整的代碼為：
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/less/vant.less'), // 需要全局導(dǎo)入的less
],
})
}
module.exports = {
css: {
extract: IS_PROD, // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態(tài)注入到 JavaScript 中的 inline 代碼)。
sourceMap: false,
loaderOptions: {
// less加載器
less: {
javascriptEnabled: true,
modifyVars: {
// 直接覆蓋變量
// 'text-color': 'red',
// 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
'hack': `true; @import "${resolve('./src/assets/less/vant.less')}";`
}
},
scss: {
// 向全局sass樣式傳入共享的全局變量, $src可以配置圖片cdn前綴
// 詳情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
// prependData: `
// @import "assets/css/mixin.scss";
// @import "assets/css/variables.scss";
// $cdn: "${defaultSettings.$cdn}";
// `
}
}
},
// 對象參數(shù)
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
}
}
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue應(yīng)用中，有時我們需要實現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要介紹了vue-cli(vue腳手架方式搭建),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue項目中使用AES實現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項目中使用AES實現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue封裝數(shù)字框組件實現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細(xì)用法以及分類介紹，有興趣的朋友學(xué)習(xí)參考下吧。2017-12-12
vue組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
Vue源碼解讀之Component組件注冊的實現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)
本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05