Vant主題定制如何修改顏色樣式

更新時(shí)間：2022年04月26日 08:53:37 作者：小迷糊愛麗絲

這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vant主題定制修改顏色

使用場(chǎng)景

需要修改vant組件的顏色或其他的樣式時(shí)，可以用以下方法進(jìn)行自定義修改。

一個(gè)簡(jiǎn)單的效果：

第一種：完全替換主題色或其他樣式

用Vant官方提供的方法進(jìn)行定制：

1.main.js引入樣式原文件

// 引入全部樣式
import 'vant/lib/index.less';
// 引入單個(gè)組件樣式
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類名

在控制臺(tái)選中元素，獲取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 文件，用來(lái)覆蓋修改框架里的顏色

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對(duì)象里
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
// 此函數(shù)為方法體，需放在對(duì)象的外面
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 提取至一個(gè)獨(dú)立的 CSS 文件中 (而不是動(dòng)態(tài)注入到 JavaScript 中的 inline 代碼)。
	    sourceMap: false,
	    loaderOptions: {
	      // less加載器
	      less: {
	        javascriptEnabled: true,
	        modifyVars: {
	          // 直接覆蓋變量
	          // 'text-color': 'red',
	          // 或者可以通過(guò) less 文件覆蓋（文件路徑為絕對(duì)路徑）
	          '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}";
	        //   `
	      }
	    }
	  },
	  // 對(duì)象參數(shù)
	  chainWebpack: config => {
	    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
	    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
	  }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: