解決vue中less的使用問題

Posted on by

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

2.修改webpack.base.config.js文件，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加

// 此種方法在控制臺中標簽樣式顯示的是style標簽樣式
{ 
    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader",
　　
　　 options: { sourceMap: true } //可以在控制臺中看到當前標簽樣式來自於哪個less文件
}

3.在項目中使用

在vue文件中的style標簽中添加lang=”less”即可在標簽中使用less，或者外部引入less

遇到的問題：

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

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

或者直接在package.json文件中直接修改版本號 然後 npm install

到此這篇關於vue中less的使用的文章就介紹到這瞭,更多相關vue less使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：