A simple tutorial on using less in vue2

This article mainly introduces a simple tutorial for using less in vue2. Since there is no need to manually configure webpack, using less in vue is very simple. You only need to install less and less-loadder.

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, you only need to install less , less-loader will do.

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 lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Supplement:

How to use less in vue

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

elementUI is based on vue2

vue Using less

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

When everything is ready:

Step one:

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

Second step:

Modify the webpack.config.js file and 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. Then when using it, add lang="less" in the style tag and you can write the code of less (add in the style tag scoped means it is only 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>
)

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solution to 403 error when using jquery ajax post data in Django

How to use ajax post in Django framework Method

How to solve the problem of Chinese garbled characters when JQuery ajax returns json

The above is the detailed content of A simple tutorial on using less in vue2. For more information, please follow other related articles on the PHP Chinese website!