溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue-cli初始化項(xiàng)目中使用less的方法

發(fā)布時(shí)間：2020-09-28 10:04:37 來源：腳本之家 閱讀：327 作者：chinaBerg 欄目：web開發(fā)

什么是less?

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

引言

現(xiàn)在前端的vue框架越來越火，vue-cli作為vue項(xiàng)目的腳手架工具，是我們?cè)陂_發(fā)中最最經(jīng)常使用的。為了在vue項(xiàng)目中更好的管理我們的css文件，我們通常會(huì)引入less或者sass來幫助我們管理我們的css代碼。那么，本文旨在記錄如何在vue-cli初始化的項(xiàng)目中使用less來幫助我們更好的管理css代碼。

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

方法如下：

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

cnpm install less less-loader --save

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

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

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手