溫馨提示×

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

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

vue cli安裝使用less的教程詳解

發(fā)布時(shí)間：2020-09-17 14:04:17 來源：腳本之家 閱讀：159 作者：Jello 欄目：web開發(fā)

vue-cli構(gòu)建的項(xiàng)目默認(rèn)是不支持less的，需要自己添加依賴

1.安裝less和less-loader ，在項(xiàng)目目錄下運(yùn)行如下命令

npm install less less-loader --save-dev

vue cli安裝使用less的教程詳解

2.安裝成功后，打開build/webpack.base.conf.js ，在 module.exports = 的對(duì)象的module.rules 后面添加一段：

module.exports = {

// 此處省略無數(shù)行，已有的的其他的內(nèi)容
module: {
  rules: [
   // 此處省略無數(shù)行，已有的的其他的規(guī)則
   {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
   }
  ]
 }
}

vue cli安裝使用less的教程詳解

3.最后，在代碼中的style標(biāo)簽中加上lang="less"屬性即可

<style lang="less" scoped>
 .index-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
   font-size: 0.373rem;
  }
 }
</style>

總結(jié)

以上所述是小編給大家介紹的vue cli安裝使用less的教程詳解 ,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

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

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

AI
助
手