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