前言

我們所能看到的美觀的網(wǎng)頁都是經(jīng)過UI精心設(shè)計后，由前端攻城獅搭建的。網(wǎng)頁想要有炫酷的樣式，就需要用到css來處理，其中不乏會出現(xiàn)大量重復(fù)、冗余的代碼，這時，像less、sass、scss等樣式預(yù)處理器就出現(xiàn)了，極大地精簡了css代碼，提高了開發(fā)效率。今天跟著本文一起看看在vue項目中使用less語法如何穿透效果和混入吧~

一、樣式穿透

vue項目中的結(jié)構(gòu)是由template、script、style三部分構(gòu)成。style中的lang屬性決定了樣式中的語法，設(shè)置了scoped屬性就可以避免當(dāng)前頁面的樣式污染到其他頁面。

1.  什么是樣式穿透？

自己設(shè)置的樣式覆蓋原有的樣式

2.  如何使用？

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

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中的函數(shù)，將樣式中重復(fù)的代碼抽離出來，使用的時候可以多次引入。

2.  如何使用？

定義

代碼如下（示例）：

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

使用

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

三、 less自動化導(dǎo)入

1. 自動化導(dǎo)入好處

可以將經(jīng)常出現(xiàn)的樣式文件抽離出來，放到一個less文件中。

然后在需要用到的地方直接使用即可，不用手動引入文件

2.  如何實現(xiàn)？

• 使用vue-cli的style-resoures-loader插件來完成自動注入到每個vue組件中style標(biāo)簽中

項目根目錄下終端中運行vue add style-resources-loader,添加一個vue-cli插件

注:終端窗口中會彈出詢問，寫入y之后選擇less即可

• 安裝完畢后會自動生成vue.config.js文件，在配置中把需要自動導(dǎo)入的less文件地址加上就可以了

代碼如下（示例）：

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置哪些文件需要自動導(dǎo)入
        path.join(__dirname, './src/xx/xx.less')
      ]
    }
  }
}

總結(jié)

到此這篇關(guān)于vue項目中l(wèi)ess的一些使用小技巧的文章就介紹到這了,更多相關(guān)vue中l(wèi)ess使用技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論