Home > Article > Web Front-end > 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!