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

目录：

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

一.vue cli2安装使用less

原文地址：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" 属性即可~

<style scoped lang="less">

</style>

二.vue cli3安装使用less

第一种方式

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

再里面可以选择：

就可以了

第二种方式

安装方式：

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"

}