Use less in vue components

This time I will bring you the use of less in vue components and what are the precautions for using less in vue components. 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 to install less, 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 lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Supplementary:

How to use less in vue

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

elementUI is based on vue2

Using less in vue

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

When everything is ready:

The first step:

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

Step 2:

Modify the webpack.config.js file and configure loader to load dependencies, To make it support 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. (Adding scoped to the style tag 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>
)

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:

How to send a POST request using JSON format

How to customize the operation login form code in Vue.js

Vue’s UI component library custom dynamic components

The above is the detailed content of Use less in vue components. For more information, please follow other related articles on the PHP Chinese website!