Shulou(Shulou.com)05/31 Report--

This article mainly explains the "Vant theme customization how to modify the color style", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Vant theme customization how to modify the color style" bar!

Vant theme customization, color modification, usage scene

When you need to modify the color or other style of a vant component, you can customize it in the following ways.

A simple effect:

The first one: completely replace the theme color or other style

Customize using the methods officially provided by Vant:

1.main.js import style original file

/ / introduce all styles import 'vant/lib/index.less';// introduce single component style import' vant/lib/button/style/less'

two。 Create a less file

3. Modify configuration

If you build it with vue-cli, you can change the configuration directly in vue.config.js:

Const path = require ("path"); / / path to the less file const myTheme = path.resolve (_ _ dirname, ". / src/assets/less/vantChange.less"); module.exports = {css: {loaderOptions: {less: {modifyVars: {hack: `true; @ import "${myTheme}" `},}},}

4. Modify the styl

Refer to the style variables provided on the official website

The second kind: direct overlay style

1. Find the class class name

Select the element in the console, get the class class name, and double-click to select copy.

two。 Modify the styl

Van-sidebar-item--select::before {background-color:#CCCCFF;} .van-sidebar-item--select, .van-sidebar-item--select:active {background-color:#FFCCCC; color:white;} Vant custom theme color first look at the effect picture

Before modification:

After modification

/ / less file code @ white: # 000

Steps and methods

1. Introduce it into main.js

Import 'vant/lib/index.less'

2. Create a new less file to overwrite the colors in the modified frame.

3. Install less and less-loader. Less-loader Xu, version 5.0.0 is required.

Npm install less--save-devnpm install less less-loader@5.0.0-- save-dev

4. Add code to the vue.config.js file

/ / need to be placed in the module.exports object chainWebpack: config = > {const types = ['vue-modules',' vue', 'normal-modules',' normal'] types.forEach (type = > addStyleResource (config.module.rule ('less'). OneOf (type))}, / / this function is the method body Need to be placed outside the object function addStyleResource (rule) {rule.use ('style-resource') .loader (' style-resources-loader') .options ({patterns: [path.resolve (_ _ dirname,'. / src/assets/less/vant.less'), / / less that needs to be imported globally],})}

The complete code is:

Function addStyleResource (rule) {rule.use ('style-resource') .loader (' style-resources-loader') .options ({patterns: [path.resolve (_ _ dirname,'. / src/assets/less/vant.less'), / / less that needs to be imported globally] })} module.exports = {css: {extract: IS_PROD, / / whether to extract the CSS from the component into a separate CSS file (instead of the inline code that is dynamically injected into JavaScript). SourceMap: false, loaderOptions: {/ / less loader less: {javascriptEnabled: true, modifyVars: {/ / directly override variable / / 'text-color':' red' / / or you can overwrite 'hack': `true through the less file (the file path is absolute) @ import "${resolve ('. / src/assets/less/vant.less')}" `}}, scss: {/ / pass the shared global variable to the global sass style $src can configure the picture cdn prefix / / details: 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}" / / `}, / / object parameter chainWebpack: config = > {const types = ['vue-modules',' vue', 'normal-modules' 'normal'] types.forEach (type = > addStyleResource (config.module.rule (' less'). OneOf (type))}} Thank you for your reading The above is the content of "Vant theme customization how to modify color style", after the study of this article, I believe you have a deeper understanding of how to modify the color style of Vant theme customization, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.