Vue工程中如何使用css-module

前言

本文介紹下css module的作用以及在vue工程中如何使用。
CSS Modules不是將CSS改造的具有編程能力，而是加入了局部作用域、依賴管理，這恰恰解決了最大的痛點?？梢杂行П苊馊治廴竞蜆邮經_突，能最大化地結合現(xiàn)有 CSS 生態(tài)和 JS 模塊化能力。

簡單來說：通過css module可以通過通用的配置將指定的css選擇器配置成想要的格式。

正文

還是以實際的例子說話，下面是以vue-cli4初始化的腳手架工程。
首先，在vue.config.js中配置一下css-loader的配置項，指定我們想要的選擇器格式


小Q截圖-20210422111323.png

然后在我們的.vue文件中的使用方式如下：
（1）首先在<style>添加module屬性（可以和less和scss配合使用）
其中 'auth-[name]-[local]-[hash:base64:5]' 表示的命名規(guī)則是：固定的字符串-[文件名]-[原始選擇器名]-[長度為5的hash值]。

小Q截圖-20210422112040.png

（2）在相應的標簽地方使用如下方式（style.key 或style[key]）進行使用
image.png

最后在瀏覽器中渲染出來的dom以及編譯好的文件效果如下：


瀏覽器dom渲染效果

編譯后的效果

同時，我們也可以正常使用全局的樣式方式：


加入全局樣式
編譯后的效果

如果是id選擇器，使用方式同理


id選擇器
編譯后的效果
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容