在vue中使用css modules替代scroped的方法


Posted in Javascript onMarch 10, 2018

前面的话

css modules是一种流行的模块化和组合CSS的系统。 vue-loader提供了与css modules的集成,作为scope CSS的替代方案。本文将详细介绍css modules

引入

最开始使用Vue的时候,提倡并大量使用的是scoped这种技术

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

但是,它并不能完全避免冲突

<span data-v-0467f817 class="errShow">用户名不得为空</span>

以上面的代码为例,使用scoped之后,它在元素上添加了一个唯一的属性'data-v-0467f817',CSS样式被编译如下

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

但是,如果用户也定义了一个errShow类名,会影响到所有定义为errShow类名的组件的显示

而CSS modules则做的更彻底,它不是添加属性,而是直接改变类名

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

这样,大大降低了冲突的可能性,只要不是用户直接给span标签设置样式,基本上不会影响组件的显示

模块化

CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式

实际上,CSS Modules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢?

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。于是,亟待解决的就是样式冲突(污染)的问题。一般地,为了解决冲突,会把class命名写长一点,降低冲突几率;加上父元素的选择器,来限制范围等

CSS模块化就是来解决这个问题的,一般地,分为三类

1、命名约定类

该类CSS模块化方案主要用来规范CSS命名,最常见的是BEM,当然还有OOCSS等,在构建工具出现之前,大多数都是在CSS命名上做文章

2、CSS in JS

彻底抛弃CSS,用javascript来写CSS规则,常见的有styled-components

3、使用JS来管理样式

使用JS编译原生的CSS文件,使其具备模块化的能力,最常见的就是CSS Modules

随着构建工具的兴起,越来越多的人开始使用后两者方案,书写CSS时,不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可

写法

下面来介绍CSS modules的写法

在style标签中添加module属性,表示打开CSS-loader的模块模式

<style module>
.red {color: red;}</style>

在模板中使用动态类绑定:class,并在类名前面加上'$style.'

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

如果类名包含中划线,则使用中括号语法

<h4 :class="$style['header-tit']">类别推荐</h4>

也可以使用数组或对象语法

<p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>

更复杂的对象语法

<ul 
  :class="{
    [$style.panelBox]:true,
    [$style.transitionByPanelBox]:needTransition
   }"

更复杂的数组语法

<li
   :class="[
    $style['aside-item'],
    {[$style['aside-item_active']]:(i === index)}
   ]"

配置

css-loader关于CSS modules的默认配置如下

{
 modules: true,
 importLoaders: 1,
 localIdentName: '[hash:base64]'
}

可以使用vue-loader的cssModules选项为css-loader进行自定义的配置

module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue-loader',
   options: {
    cssModules: {
     localIdentName: '[path][name]---[local]---[hash:base64:5]',
     camelCase: true
    }
   }
  }
 ]
}

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

Javascript 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
javascript Demo模态窗口
Dec 06 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
js实现轮播图特效
May 28 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
redux-saga 初识和使用
Mar 10 #Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 #Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 #Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
在vue里面设置全局变量或数据的方法
Mar 09 #Javascript
You might like
深入理解PHP中的global
2014/08/19 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Python多线程实例教程
2014/09/06 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Django如何使用redis作为缓存
2020/05/21 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python接收手机短信的代码整理
2020/08/02 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
电厂职工自我鉴定
2014/02/20 职场文书
风险评估实施方案
2014/03/09 职场文书
协会周年庆活动方案
2014/08/26 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
督导岗位职责范本
2015/04/10 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL