vue 之 css module的使用方法
2019/6/26 23:19:46
本文主要是介绍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是格式化类名: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的使用方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南