Detailed explanation of modifying the default style of external component Vant based on Vue cli development

Preface

When introducing external components, if you want to modify the default style, you can modify it through the class, but there are usually various reasons such as insufficient weight. The official website actually lists a set of theme customization solutions to modify the style by overwriting the configuration file. The official website address is: Theme Customization

Tip: The following is the main content of this article. The following cases can be used for reference

1. Less

Because Vant uses Less to preprocess the styles and has some built-in style variables, you can customize the theme you need by replacing the style variables.

Configure less for your project:

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

After configuration, try to see if less can be used. If an error is reported, it is usually caused by a higher version.
You can try to downgrade the version

"less-loader": "^5.0.0",

2. Import your components

For example, I introduce the Tab tab component here

<van-tabs v-model="active">
 <van-tab title="Tag 1">Content 1</van-tab>
 <van-tab title="Tag 2">Content 2</van-tab>
 <van-tab title="Tag 3">Content 3</van-tab>
 <van-tab title="Tag 4">Content 4</van-tab>
</van-tabs>

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

It has default styles, such as active font color, bottom state color, etc.

3. Modify the configuration file

Step 1: Directly import the less file

Import in main.js:

import 'vant/lib/index.less';

Step 2: Modify style variables

Find your vue.config.js file. If it doesn’t exist, create a new configuration file at the same level as package.json and add the following code:

module.exports = {
 css: {
 loaderOptions: {
  less: {
  // If the less-loader version is less than 6.0, please remove the lessOptions level and configure the options directly.
  lessOptions: {
   modifyVars: {
   // Directly overwrite the variable 'text-color': '#111',
   'border-color': '#eee',
   // Or you can overwrite it through a less file (the file path is an absolute path)
   hack: `true; @import "your-less-file-path.less";`,
   },
  },
  },
 },
 },
};

You can modify the variables directly or list the list into a less file and import it. Note that if the less version is lower, follow the comments in the code.
Go back to the usage document of the previous label component and scroll down to find the style variables section.

It defines some styles for components. You can modify the styles you need to modify by looking at their names. For example, the variable @tab-active-text-color should represent the color of the font in the active state. Now I need to change it to the color I want, so I modify it in the configuration file.

Restart the server again and you can see that the style of the component has changed.

Summarize

This is the end of this article about how to modify the default style of the external component Vant based on Vue cli development. For more relevant Vuecli Vant default style content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!