vue cli安装使用less的教程详解

淩亂°似流年 2022-10-08 15:28 197阅读 0赞

**目录：**

1.  vue cli2安装使用less
2.  vue cli3安装使用less

## 一.vue cli2安装使用less ##

原文地址：[https://blog.csdn.net/zmhawk/article/details/75209161][https_blog.csdn.net_zmhawk_article_details_75209161]

vue-cli构建的项目默认是不支持less的，需要自己添加依赖

1. 安装less和less-loader ，在项目目录下运行如下命令

`npm install less less-loader --save-dev`

2. 安装成功后，打开 `build/webpack.base.conf.js` ，在 `module.exports =` 的对象的 module.rules 后面添加一段：

module.exports = {
        //  此处省略无数行，已有的的其他的内容
        module: {
            rules: [
              //  此处省略无数行，已有的的其他的规则
              {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
              }
            ]
        }
    }

3. 最后，在代码中的 style 标签中 加上 `lang="less"` 属性即可~

## 二.vue cli3安装使用less ##

### 第一种方式 ###

当然在使用 `vue create` 创建新项目的时候，也是可以在命令行直接选择的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

再里面可以选择：

![20210622135302175.png][]

就可以了

### 第二种方式 ###

安装方式：

`npm``install` `less` `less``-loader --save`

或者

`cnpm``install` `less` `less``-loader --save`

安装之后，在vue组件中的html中加入lang="less"就可以使用less了

<template>
    //code..
    </template>
    
    <script>
    //code...
    </script>
    
    <style scoped  lang="less">
        .box{
            p{
                span{ color:red;}
            }
        }
    </style>

这里我们提一下，如何在新版 Vue CLI 中增加对 `less` 的支持

其实很简单：需要在 package.json 中定义依赖：

"devDependencies": {
    
      "less": "^3.0.4",
    
      "less-loader": "^4.1.0"
    
    }

[https_blog.csdn.net_zmhawk_article_details_75209161]: https://blog.csdn.net/zmhawk/article/details/75209161
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/7a1bf69861b046a98ae19fba7b8689a8.png
[20210622135302175.png]: /images/20221005/c000066d0364440194fda13017d03e43.png