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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 在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

  • vue 之 css module的使用方法

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

  • 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这种处理会造成

  • 详解Vue中的scoped及穿透方法

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

  • Vue中的scoped实现原理及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

  • 基于vue中的scoped坑点解说

    今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider

  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    目录 前言 scoped的使命与作用 scoped的副作用 样式穿透(::v-deep) 总结 前言 我们平常在开发过程中特别是Vue技术栈的前端同学们,经常会用到一些UI组件库,特别是element-ui使用的频率是比较高的,我们经常会修改这些UI组件库的默认样式时会使用到深度选择器,大家都知道这么做,有没有想过为什么?趁着疫情在家于是研究了一下,在这里分享一下 scoped的使命与作用 这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下s

  • Vue中watch、computed、updated三者的区别及用法

    1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediat

  • 在vue中如何引入外部的css文件

    目录 vue中引入外部css文件 1. 全局引入 2. 局部引入相对路径 3. 局部引入绝对路径 css-loader导致vue中样式失效的坑 问题描述 环境 原因 方案 vue中引入外部css文件 在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入 将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 import '@/style/reset.css' 我引入的是清除默认样式的css文件 2. 局部引入相对路径 <style scope

  • Vue中的methods、watch、computed的区别

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑. computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行 计算属性是基于依赖进行缓

  • Vue中的v-model，v-bind，v-on的区别解析

    目录 v-model v-bind(缩写为 : ) v-on(缩写为@) 总结 v-model v-model是进行动态双向绑定的(只能用在input, textarea, select上),以input为例,进行绑定后,vue对象中data的相应值会与input的输入同步变动. // HTML <input type="text" v-model="message"> new Vue({ data { message: ' ', //最开始messag

  • vue中v-model指令与.sync修饰符的区别详解

    vue中v-model指令与.sync修饰符的区别详解

    目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch

随机推荐