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

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

開(kāi)工

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

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

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

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

特別注意：css module所有類(lèi)名都要:class進(jìn)行綁定

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

樣式表需要添加module，可以通過(guò)console.log(this.$style);輸出當(dāng)前所有的:local { }類(lèi)名。默認(rèn)是:local { }，即:local前綴是可以省略的，若要全局類(lèi)名則資額在: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)前文件名稱(chēng)，local是當(dāng)前定義的類(lèi)名名，hash是hash生成的字符串，長(zhǎng)度為5；true：支持大駝峰也支持中括號(hào)命名

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

后記

過(guò)程還是蠻曲折的，小白就是道阻且長(zhǎng)啊，不過(guò)我相信積少成多，會(huì)有蛻變的一天的。

附: vue css module 官方文檔

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: