首頁 > 軟體

vue專案中less的一些使用小技巧

2021-09-15 16:01:01

前言

我們所能看到的美觀的網頁都是經過UI精心設計後,由前端攻城獅搭建的。網頁想要有炫酷的樣式,就需要用到css來處理,其中不乏會出現大量重複、冗餘的程式碼,這時,像less、sass、scss等樣式前處理器就出現了,極大地精簡了css程式碼,提高了開發效率。今天跟著本文一起看看在vue專案中使用less語法如何穿透效果和混入吧~

一、樣式穿透

vue專案中的結構是由template、script、style三部分構成。style中的lang屬性決定了樣式中的語法,設定了scoped屬性就可以避免當前頁面的樣式汙染到其他頁面。

1.  什麼是樣式穿透?

自己設定的樣式覆蓋原有的樣式

2.  如何使用?

當我們使用一個封裝好的公共元件的時候,我們對元件提供的原有樣式不滿意,想要調整一下樣式。我們不能修改公共元件中的樣式,這時候就需要用到樣式穿透來幫助我們解決這個問題了。

vue2中寫法

程式碼如下(範例):

<style lang="less" scoped>
	/deep/ a {
            text-decoration: none;
	}
</style>
<style lang="less" scoped>
	::v-deep a {
            text-decoration: none;
	}
</style>

vue3中寫法

<style lang="less" scoped>
	:deep(a) {
            text-decoration: none;
	}
</style>

二、混入

1.  什麼是混入?

類似於js中的函數,將樣式中重複的程式碼抽離出來,使用的時候可以多次引入。

2.  如何使用?

定義

程式碼如下(範例):

<style lang="less" scoped>
    .abc() {
        color: skyblue
        }
</style>

使用

<style lang="less" scoped>
    p {
        font-size: 20px;
        .abc();
      }
</style>

三、 less自動化匯入

1. 自動化匯入好處

可以將經常出現的樣式檔案抽離出來,放到一個less檔案中。

然後在需要用到的地方直接使用即可,不用手動引入檔案

2.  如何實現?

  • 使用vue-cli的style-resoures-loader外掛來完成自動注入到每個vue元件中style標籤中

專案根目錄下終端中執行vue add style-resources-loader,新增一個vue-cli外掛

注:終端視窗中會彈出詢問,寫入y之後選擇less即可

  • 安裝完畢後會自動生成vue.config.js檔案,在設定中把需要自動匯入的less檔案地址加上就可以了

程式碼如下(範例):

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 設定哪些檔案需要自動匯入
        path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

總結

到此這篇關於vue專案中less的一些使用小技巧的文章就介紹到這了,更多相關vue中less使用技巧內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com