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

Install Memcached and PHP Memcached extension under CentOS

Regarding the high-performance distributed memory...

How to configure the Runner container in Docker

1. Create a runner container mk@mk-pc:~/Desktop$ ...

How to quickly use mysqlreplicate to build MySQL master-slave

Introduction The mysql-utilities toolset is a col...

How to quickly modify the root password under CentOS8

Start the centos8 virtual machine and press the u...

JavaScript common statements loop, judgment, string to number

Table of contents 1. switch 2. While Loop 3. Do/W...

Detailed explanation of Nginx Rewrite usage scenarios and code examples

Nginx Rewrite usage scenarios 1. URL address jump...

Detailed explanation of JavaScript's Set data structure

Table of contents 1. What is Set 2. Set Construct...

HTML head tag meta to achieve refresh redirection

Copy code The code is as follows: <html> &l...

Solution to overflow of html table

If the table is wide, it may overflow. For exampl...

JS implements simple calendar effect

This article shares the specific code of JS to ac...

Detailed explanation of Nginx status monitoring and log analysis

1. Nginx status monitoring Nginx provides a built...

Detailed explanation of bash command usage

On Linux, bash is adopted as the standard, which ...

Detailed explanation of JavaScript function introduction

Table of contents Function Introduction function ...

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game

Everyone has played the pinball and brick-breakin...

Instructions for recovering data after accidental deletion of MySQL database

In daily operation and maintenance work, backup o...