vue 之 css module
前言
最近學習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 camelCase
特別注意: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>
後記
過程還是蠻曲折的,小白就是道阻且長啊,不過我相信積少成多,會有蛻變的一天的。
malk 2018.12.3