How to use less in vuejs

Method: 1. Install less dependencies; 2. Modify the "webpack.config.js" file and configure the loader to load dependencies so that it supports less; 3. Add "" statement is enough.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

vuejs configuration uses less

The first step: Install less dependencies,

npm install less less-loader --save

Step 2:

Modify the webpack.config.js file, configure the loader to load dependencies, let it support external less, add

{

  test: /\.less$/,

  loader: "style-loader!css-loader!less-loader",

},

to the original code and now it is basically The installation has been completed

The third step:Use less

When using it, add lang="less" in the style tag and you can write the less code inside Adding scoped to the

style tag means it is only valid in this scope

<style lang="less" scoped></style>

或者@import './index.less'; //引入全局less文件

Related recommendations: "vue.js tutorial"

The above is the detailed content of How to use less in vuejs. For more information, please follow other related articles on the PHP Chinese website!