Detailed explanation of using vue2+less

This time I will bring you a detailed explanation of the use of vue2 less, what are the precautions when using vue2 less, the following is a practical case, let's take a look.

So using less in vue is very simple. You only need toinstallless, less-loader

Steps

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

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

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Supplement:

How to use less

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

elementUI is based on vue2

less

First of all, the vue development environment has been installed successfully

When After everything is ready:

The first step:

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

Second Steps:

Modify the webpack.config.js file, configure the loader to load dependencies, and enable it to support external less. Add

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

to the original code. Now the installation is basically complete, and then When using it, add lang="less" to the style tag and you can write less code (add scoped to the style tag to only be valid in this scope)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

JS implements the function of exchanging left and right lists

Detailed explanation of the steps for returning to the previous page from the applet sharing page

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