vue中安装less

1.vue中安装less

2.vue-cli构建项目使用less

3.webpack中安装less

此文章是基于vue-cli构建项目安装less,如果您没有安装vue-cli，请移步https://blog.csdn.net/qq_37568942/article/details/80808148查看安装及常见问题解决方法，废话不多进正题。

安装

       1. win+R输入cmd

       2. 输入 npm i less style-loader css-loader less-loader -D 进行安装（或者npm换成cnpm，上方连接中有具体步骤）

       3. 安装成功后打开webpack.config.js，我的在E:\vue\node_modules\xxhashjs

       4. 打开后加入以下配置(//...... 为默认设置请忽略)

            module:{

                   "entry"://...... ,

                   "output"：{//.....}，
                   rules:[

                           //.....
                          {
                                test:/\.less$/,
                                loader:"style!css!less"
                          }
                      ] 
              }

         5. 在asserts中添加一个.less结尾的文件，并在app.vue的组件定义内应用less样式表（全局样式）
             import './assets/todos.less'

         6. 如果样式只限于某个组件，需要在当前组件的.vue文件中引入
              <style scoped>
                  @import '../assets/todos.less'
              </style>