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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
vue axios整合使用全攻略
May 24 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php通过session防url攻击方法
2014/12/10 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Python之批量创建文件的实例讲解
2018/05/10 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python如何实现word批量转HTML
2020/09/30 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
办公室内勤工作职责
2013/12/11 职场文书
继电保护工岗位职责
2014/01/05 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python