溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
