在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 相关文章推荐
Javascript中的相等与不等运算
Apr 25 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
5个实用的JavaScript新特性
Jun 16 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python logging通过json文件配置的步骤
2020/04/27 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
重阳节活动总结
2014/08/27 职场文书
个人存款证明书
2014/10/18 职场文书
十佳少年事迹材料
2014/12/25 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server