vue之cssmodule的使用方法

前言

創(chuàng)新互聯(lián) - 德陽服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽服務(wù)器托管，德陽服務(wù)器托管，遂寧服務(wù)器托管，綿陽服務(wù)器托管，四川云主機，成都云主機，西南云主機，德陽服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，成都機柜租用，四川老牌ＩＤＣ服務(wù)商

最近學(xué)習(xí)webpack看到了一個新鮮的東西，之前都是通過scoped來區(qū)別類名，秉著任何時候?qū)W習(xí)都不晚的心情，作為小白的我也想揭揭css module的神秘面紗。

css module目的為所有類名重新生成類名，有效避開了css權(quán)重和類名重復(fù)的問題。相比于scoped為類名添加一個hash標(biāo)識效果優(yōu)秀不少，但相對的書寫會繁瑣一些。

項目基于cli3搭建，講真的，我也是被cli3鬼迷心竅了。相比2的繁瑣，3提供界面管理對我這樣子的小白確實直觀很多，而且需要配置vue.config.js也十分合適呢。

開工

動手之前先配置項目，網(wǎng)上很多文章說需要下載css-loader插件，Vue中的vue-loader已經(jīng)集成了 CSS Modules，因此刪掉也能正常運行

在vue.config.js中添加如下配置

css: {
 loaderOptions: {
  css: {
  localIdentName: '[name]__[local]-[hash:base64:5]',
  camelCase: true
  }
 }
 }

localIdentName是格式化類名：name是當(dāng)前文件名稱，local是當(dāng)前定義的類名名，hash是hash生成的字符串，長度為5
camelCase：在類名有中橫線時，'only'在標(biāo)簽上綁定類名時只支持大駝峰，true：支持大駝峰也支持中括號命名

特別注意：css module所有類名都要:class進行綁定

<div>
 <p class="less-color">這是通過less設(shè)置的:global字體顏色為粉色</p>
 <p :class="$style.lessFontSize">這是通過less設(shè)置的:local字體大小為40px</p>
 <p :class="$style.red">This should be red</p>
 <h5 :class="$style.headerTit">類別推薦</h5>
 <h5 :class="$style['header-tit']">類別推薦</h5>
</div>

樣式表需要添加module，可以通過console.log(this.$style);輸出當(dāng)前所有的:local { }類名。默認(rèn)是:local { }，即:local前綴是可以省略的，若要全局類名則資額在:global { }內(nèi)

<style module lang="less">
:global {
 .less-color {
 color: pink;
 }
}
:local {
 .less-font-size {
 font-size: 40px;
 }
 .red {
 color: red;
 }
 .header-tit {
 color: blue;
 }
}
</style>

效果

和配置一樣：當(dāng)前文件名稱，local是當(dāng)前定義的類名名，hash是hash生成的字符串，長度為5；true：支持大駝峰也支持中括號命名

<div>
 <p class="less-color">這是通過less設(shè)置的:global字體顏色為粉色</p>
 <p class="index__less-font-size-2QPBO">這是通過less設(shè)置的:local字體大小為40px</p>
 <p class="index__red-3YoIm">This should be red</p>
 <h5 class="index__header-tit-3pTz4">類別推薦</h5>
 <h5 class="index__header-tit-3pTz4">類別推薦</h5>
</div>

后記

過程還是蠻曲折的，小白就是道阻且長啊，不過我相信積少成多，會有蛻變的一天的。

附: vue css module 官方文檔

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：vue之cssmodule的使用方法
文章來源：http://www.muchs.cn/article34/jdoope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站維護、微信公眾號、軟件開發(fā)、手機網(wǎng)站建設(shè)、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容