在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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
解决Vue项目中tff报错的问题
Oct 21 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php常用的url处理函数总结
2014/11/19 PHP
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
python中的reduce内建函数使用方法指南
2014/08/31 Python
python的Template使用指南
2014/09/11 Python
python格式化字符串实例总结
2014/09/28 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
篮球比赛策划方案
2014/06/05 职场文书
文艺演出策划方案
2014/06/07 职场文书
扬尘污染防治方案
2014/06/15 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS