在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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
phpwind中的数据库操作类
2007/01/02 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php生成gif动画的方法
2015/11/05 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
js 内存释放问题
2010/04/25 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python连接phoenix的方法示例
2017/09/29 Python
python 检查文件mime类型的方法
2018/12/08 Python
Django实现学员管理系统
2019/02/26 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
报关报检委托书
2014/04/08 职场文书
单位接收函格式
2015/01/30 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
婚姻出轨保证书
2015/05/08 职场文书
党支部审查意见
2015/06/02 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
mysql中关键词exists的用法实例详解
2022/06/10 MySQL