什么是less?

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

引言

現在前端的vue框架越來越火，vue-cli作為vue項目的腳手架工具，是我們在開發中最最經常使用的。為了在vue項目中更好的管理我們的css文件，我們通常會引入less或者sass來幫助我們管理我們的css代碼。那么，本文旨在記錄如何在vue-cli初始化的項目中使用less來幫助我們更好的管理css代碼。

下面話不多說了，來隨著小編一起看看詳細的介紹吧

方法如下：

首先，安裝less，推薦使用淘寶鏡像安裝：

cnpm install less less-loader --save

然后，修改配置文件：打開build文件夾-->找到webpack.base.conf.js，輸入配置代碼：

module.exports = { …… module: {    rules: [   ……   //在rules數組的最后位置插入一項配置代碼   {    test: //.less$/,    loader: "style-loader!css-loader!less-loader"   }    ]}

最后在你的style標簽中添加lang="less",scoped表示私有作用域

<style scoped lang="less"> /*  * 這里面你就可以愉快地書寫less代碼了  */</style>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。