1. 程式人生 > 程式設計 >解決vue中less的使用問題

解決vue中less的使用問題

1.安裝less依賴:npm install less less-loader --save

2.修改webpack.base.config.檔案,配置loader載入依賴,讓其支援外部的less,在原來的程式碼上新增

/mUUyQvJ/ 此種方法在控制檯中標籤樣式顯示的是style標籤樣式
{ 
    test: /\.less$/,loader: "style-loader!-loader!less-loader",  
   options: { sourceMap:mUUyQvJ true } //可以在控制檯中看到當前標籤樣式來自於哪個less檔案
}

解決vue中less的使用問題

3.在專案中使用

在檔案中的style標籤中新增lang="less"即可在標籤中使用less,或者外部引入less

遇到的問題:

解決vue中less的使用問題

原因:less-loader安裝的版本過高
解決方案:

1.npm uninstall less-loader2.npm install [email protected]

或者直接在http://www.cppcns.compackage.json檔案中直接修改版本號 然後 npm install

解決vue中less的使用問題

到此這篇關於vue中less的使用的文章就介紹到這了,更多相關vue less使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!