Some tips for using less in Vue projects

Some tips for using less in Vue projects

Preface

The beautiful web pages we can see are all carefully designed by UI and built by front-end engineers. If you want a web page to have a cool style, you need to use CSS to process it, which will inevitably result in a lot of repeated and redundant code. At this time, style preprocessors such as less, sass, and scss appear, which greatly simplifies the CSS code and improves development efficiency. Today, let’s follow this article to see how to use less syntax in Vue projects to penetrate effects and mixins~

1. Style penetration

The structure of the vue project consists of three parts: template, script, and style. The lang attribute in style determines the syntax of the style. Setting the scoped attribute can prevent the style of the current page from polluting other pages.

1. What is pattern penetration?

The style you set overrides the original style

2. How to use?

When we use a packaged public component, we are not satisfied with the original style provided by the component and want to adjust the style. We cannot modify the styles in public components, so we need to use style penetration to help us solve this problem.

Writing in vue2

The code is as follows (example):

<style lang="less" scoped>
	/deep/ a {
            text-decoration: none;
	}
</style>
<style lang="less" scoped>
	::v-deep a {
            text-decoration: none;
	}
</style>

Writing in Vue3

<style lang="less" scoped>
	:deep(a) {
            text-decoration: none;
	}
</style>

2. Mixing

1. What is a mixin?

Similar to the function in js, it extracts the repeated code in the style and can be introduced multiple times when used.

2. How to use?

definition

The code is as follows (example):

<style lang="less" scoped>
    .abc() {
        color: skyblue
        }
</style>

use

<style lang="less" scoped>
    p {
        font-size: 20px;
        .abc();
      }
</style>

3. Less automatic import

1. Benefits of automated import

You can extract frequently appearing style files and put them into a less file.

Then you can use it directly where you need it, without manually importing the file

2. How to achieve it?

  • Use the style-resoures-loader plug-in of vue-cli to automatically inject it into the style tag of each vue component

Run vue add style-resources-loader in the terminal in the project root directory to add a vue-cli plug-in

Note: A query will pop up in the terminal window. Type y and select less.

  • After the installation is complete, the vue.config.js file will be automatically generated. Just add the address of the less file that needs to be automatically imported in the configuration.

The code is as follows (example):

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns:
        // Configure which files need to be automatically imported path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

Summarize

This is the end of this article about some tips for using less in vue projects. For more information about using less in vue, 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!

You may also be interested in:
  • 22 Vue optimization tips (project practical)
  • Vue.js performance optimization N tips (worth collecting)
  • Summary of practical skills commonly used in Vue projects
  • Summary of 10 advanced tips for Vue Router
  • 8 tips for Vue that you will learn after reading it
  • Sharing tips on using vue element and nuxt
  • Summary of common routines and techniques in Vue development
  • A brief discussion on the use of Vue functional components
  • 6 tips for writing better v-for loops in Vue.js
  • 25 Vue Tips You Must Know

<<:  VMware virtual machine to establish HTTP service steps analysis

>>:  How to gracefully and safely shut down the MySQL process

Recommend

A brief discussion on the placement of script in HTML

I used to think that script could be placed anywh...

Several ways to pass data from parent components to child components in Vue

I have been studying the source code of Vue recen...

The button has a gray border that is ugly. How to remove it?

I used the dialog in closure and drew a dialog wit...

Summary of 6 Linux log viewing methods

As a backend programmer, you deal with Linux in m...

What is ZFS? Reasons to use ZFS and its features

History of ZFS The Z File System (ZFS) was develo...

Detailed explanation of mysql download and installation process

1: Download MySql Official website download addre...

Element Timeline implementation

Table of contents Components - Timeline Custom no...

A detailed introduction to the use of block comments in HTML

Common comments in HTML: <!--XXXXXXXX-->, wh...

React+ts realizes secondary linkage effect

This article shares the specific code of React+ts...

js implementation of verification code case

This article example shares the specific code of ...

CentOS7 upgrade kernel kernel5.0 version

Upgrade process: Original system: CentOS7.3 [root...

Tips for implementing list loop scrolling based on jQuery (super simple)

I saw a good idea and recorded it. I have used jQ...

CSS pixels and solutions to different mobile screen adaptation issues

Pixel Resolution What we usually call monitor res...