第一步：查看webpack和webpack-cli是否安裝

打開cmd，通過命令查看

webpack -v

webpack-cli -v

如果沒有安裝，要先進行安裝

可以通過 npm view webpack version / npm view webpack-cli version 查看當前webpack的最新版本

可以通過 npm view webpack versions 查看當前webpack的所有版本（webpack-cli同理）

通過命令安裝webpack和webpack-cli

如果先安裝webpack，會提示報錯，沒有安裝webpack-cli，所以先安裝webpack-cli比較好安裝的版本最好是 webpack@4 webpack-cli@3，因為下面less-loader的版本是根據(jù)webpack選擇的，其他版本對應(yīng)的less-loader我暫時沒有去查

npm install webpack-cli -g 

npm install webpack -g

第二步：確定webpack版本

上一步中，我們已經(jīng)知道webpack的版本是4+

第三步：安裝less和less-loader

在vue項目打開終端，進入項目安裝（我記得less好像全局安裝沒用，每個vue項目要單獨安裝）
less目前的最高版本是5+，但保險起見，我們還是安裝4+比較好（我不知道安裝5+會不會報錯）

npm install less@4 --save-dev

less-loader的版本號要搭配webpack的版本號來選擇，webpack@4+可以選擇的less-loader版本是5~7（忘記在哪里查到的了，不確定一定是對的，不過我安7是沒問題的）

npm install less-loader@7 --save-dev

第四步：使用less

完成less的安裝后，我們只需要在style節(jié)點上加上lang=‘less’，就可以使用less語法了

<style lang='less' scoped>

</style>

總結(jié)

安裝webpack@4安裝webpack-cli@3安裝less@4安裝less-loader@7

我是在自己電腦已經(jīng)安裝的webpack和webpack-cli的版本的基礎(chǔ)上安裝的less，我不知道其他版本這樣安裝會不會報錯，報錯很大一部分原因是less-loader版本過高，和webpack版本不適配

到此這篇關(guān)于Vue項目安裝less和less-loader的文章就介紹到這了,更多相關(guān)Vue安裝less和less-loader內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論