Detailed explanation of steps for using less in vue2

This time I will bring you a detailed explanation of the steps for using less with vue2. What are the precautions for using less with vue2. The following is a practical case, let’s take a look.

First of all, let me explain that if the project is created using npm init webpack project name, there is no need to manually configure webpack

So using less in vue is very simple Now, you just need toinstallless, less-loader

Steps

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

If the installation is successful, you can use less in the vue component

<style>
 .hello{
  a{
   color:red;
  }
 }</style>

Supplement:

How to use less in vue

http://element.eleme.io/ //

elementUI is based on vue2

less is used in vue

First the vue development environment has been installed successfully

When everything is ready:

First Step:

Install less dependencies, npm install less less-loader --save

Step 2:

Modify the webpack.config.js file , configure the loader to load dependencies so that it supports external less, add

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

to the original code. Now the installation is basically completed, and then add lang="less" to the style tag when using it. You can write less code (adding scoped in the style tag means it is only valid in this scope)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link>
<script></script>
)

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

JS left list transfer to the right

Analysis of JS time-sharing function

Detailed explanation of the steps of passing array parameters to controller in js

The above is the detailed content of Detailed explanation of steps for using less in vue2. For more information, please follow other related articles on the PHP Chinese website!