How to use less for vuejs

Editor to share with you how to use vuejs less, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Method: 1, install less dependency; 2, modify "webpack.config.js" file, configure loader load dependency, make it support less;3, add "less code" statement in the page you need.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vuejs configuration uses less

Step 1: install less dependencies

Npm install less less-loader-save

Step 2:

Modify the webpack.config.js file, configure the loader load dependency to support external less, and add

{test: /\ .less $/, loader: "styleMurloader loaded cssMusure loaderlesslesslyloader",}

Now the installation is basically complete.

Step 3: use less

When using it, add lang= "less" to the style tag and you can write the less code.

Add scoped to the style tag to be valid only in this scope

Or @ import'. / index.less'; / / introduce the global less file. These are all the contents of the article "how vuejs uses less". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!