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!