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>