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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
javascript实现电商放大镜效果
Nov 23 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生成自己的LOG文件
2006/10/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
phpinfo的知识点总结
2019/10/10 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python中for循环详解
2014/01/17 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
商务日语专业自荐信
2014/04/17 职场文书
环保倡议书怎么写
2014/05/16 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL