Vue中对比scoped css和css module的区别

scoped css

官方文档

scoped css可以直接在能跑起来的vue项目中使用。

使用方法:

<style scoped>
h1 {
 color: #f00;
}
</style>

使用scoped划分本地样式的结果编译结果如下:

h1[data-v-4c3b6c1c] {
 color: #f00;
}

即在元素中添加了一个唯一属性用来区分。

缺点

一、如果用户在别处定义了相同的类名,也许还是会影响到组件的样式。

二、根据css样式优先级的特性,scoped这种处理会造成每个样式的权重加重了:

即理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。

所以在引用包含scoped的第三方插件时如若需要修改样式则需要全局修改,而且要注意权重问题,0.0迫不得已再使用!important。

三、如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性:

所以一般父组件如果加了scoped,会比已经设置过自己样式的子组件内除最外层标签的内层标签的权重低,影响不到他们的样式。

不过也是可以通过如下方法影响到的:

四、scoped会使标签选择器渲染变慢很多倍

官方给了一些注意事项如下:

我们可以看到用标签选择器时scoped会严重降低性能,而使用class或id则不会。

css module

官方文档

css module需要增加css-loader配置才能生效,具体可看文档的实现。

注意

如果你使用的是style-loader,如果想让配置生效需要更换到文档所述的vue-style-loader。

二者区别可以从这里了找vue-style-loader

使用如下:

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

使用module的结果编译如下:

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

由此可见,css module直接替换了类名,排除了用户设置类名影响组件样式的可能性。

这样$style.red就可以当做一个变量,并且可以在js中使用,如下:

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

我们可以看到,module在使用时多出了绑定和$style,如果你想更优雅,可以看一下这个vue-css-modules

使用css module在keyframes中的问题

使用CSS modules处理动画animation的关键帧keyframes,动画名称必须先写。

animation: ani 1s;能正常编译,而animation: 1s ani;则会编译的不符合预期,所以平时养成良好的css参数书写顺序也很重要。

总结

综上所述,css module前期进行不麻烦的配置,实现的效果比scoped css更优,这里推荐使用css module。

以上所述是小编给大家介绍的Vue中对比scoped css和css module,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-05-16

vue 之 css module的使用方法

前言 最近学习webpack看到了一个新鲜的东西,之前都是通过scoped来区别类名,秉着任何时候学习都不晚的心情,作为小白的我也想揭揭css module的神秘面纱. css module目的为所有类名重新生成类名,有效避开了css权重和类名重复的问题.相比于scoped为类名添加一个hash标识效果优秀不少,但相对的书写会繁琐一些. 项目基于cli3搭建,讲真的,我也是被cli3鬼迷心窍了.相比2的繁琐,3提供界面管理对我这样子的小白确实直观很多,而且需要配置vue.config.js也十分

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

前面的话 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> 这个可选 sc

Vue 中使用 CSS Modules优雅方法

CSS Modules:局部作用域 & 模块化 CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了.如: /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样: /* button.css */ .button__button--d8fj3 { font-size: 16px; } .button__mini--f90jc { font-size

在Create React App中使用CSS Modules的方法示例

前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m

Vue中引入样式文件的方法

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

详解Vue中的scoped及穿透方法

scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

在create-react-app中使用css modules的示例代码

前言 如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一. 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能. 配置弹出配置文件 如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样 所以,第一步是将所有的配置文件弹出,在根目录运行以下代码 npm run eje

Vue中使用webpack别名的方法实例详解

在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

对vue中v-if的常见使用方法详解

使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素.或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例. 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况. 第二个例子实现了,点击按钮实现两个视图的切换. <!DOCTYPE html> <html lang="en"&

对vue中methods互相调用的方法详解

如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

vue中使用props传值的方法

1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo