前言

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

css module目的為所有類名重新生成類名，有效避開了css權重和類名重復的問題。相比于scoped為類名添加一個hash標識效果優秀不少，但相對的書寫會繁瑣一些。

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

開工

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

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

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

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

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

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

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

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

效果

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

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

后記

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

附: vue css module 官方文檔

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。