Some Tips for Using less in vue Project

Preface to the table of contents 1. Pattern penetration 1. What is style penetration? 2. How to use it?
Step 2: Blend in 1. What is blending?
2. How to use it? 3. less Automated Import 1. Benefits of automated import
2. How? Summarize

Preface

All the beautiful web pages we can see are carefully designed by UI and built by the front-end siege lion. If a web page wants to have a cool style, it needs css to deal with it, and there will be a lot of repetitive and redundant codes. At this time, style preprocessors such as less, sass and scss appear, which greatly simplifies css code and improves development efficiency. Follow this article 1 today to see how using less syntax in vue project penetrates effects and blends ~

1. Pattern penetration

The structure of vue project is composed of template, script and style3. The lang attribute in style determines the syntax in the style, and setting the scoped attribute can prevent the style of the current page from polluting other pages.

1. What is style penetration?

Your own style overrides the original style

2. How to use it?

When we use a common package, we are not satisfied with the original style provided by the component and want to adjust the style by 1. We can't modify styles in common 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>

Step 2: Blend in

1. What is blending?

Similar to the function in js, it pulls out the repeated code in the style and can be introduced many times when using it.

2. How to use it?

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 Automated Import

1. Benefits of automated import

You can pull out the frequently appearing style files and put them into an less file.

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

2. How?

Use the style-resoures-loader plug-in of vue-cli to complete automatic injection into the style tag in each vue component

Run vue add style-resources-loader in the terminal under the root directory of the project, and add one vue-cli plug-in

Note: A query will pop up in the terminal window. After writing y, select less

The vue. config. js file will be generated automatically after installation. Add the address of the less file that needs to be imported automatically 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 imported automatically 
        path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

Summarize