vue 之 css module的使用方法


Posted in Javascript onDecember 04, 2018

前言

最近学习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 官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的console.trace方法使用说明
Dec 09 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
用vue写一个日历
Nov 02 Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
小程序指纹验证的实现代码
Dec 04 #Javascript
js实现下拉框二级联动
Dec 04 #Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 #Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 #Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 #Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
You might like
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python文本特征抽取与向量化算法学习
2017/12/22 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
师范学院教师自荐书
2014/01/31 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js