广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >css的scoped css和css module有哪些区别
  • 353
分享到

css的scoped css和css module有哪些区别

css 2022-10-19 16:10:32 353人浏览 八月长安
摘要

这篇“CSS的scoped css和css module有哪些区别”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下

这篇“CSS的scoped css和css module有哪些区别”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css的scoped css和css module有哪些区别”文章吧。

css的scoped css和css module有哪些区别

一、css module

1.1.解释
为所有类名重新生成类名,有效避开了css权重和类名重复的问题。css module直接替换了类名,排除了用户设置类名影响组件样式的可能性,这样就不必为了命名绞尽脑汁。
1.2实现原理
通过给样式名加hash字符串后缀的方式,实现特定作用域语境中的样式编译后的样式在全局唯一。
1.3使用方法

  • webpack.base.conf.js文件中,向 css-loader 传入 modules: true 来开启CSS Module。localIdentName 是设置生成样式的命名规则。

//WEBpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'Vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
  • 在 < style >标签添加 module 属性

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>
  • 在vue模板中通过一个动态类绑定来使用它

<template>
  <p :class="$style.red">
    This should be red  </p></template><template>
  <p>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold    </p>
  </p></template>
  • 在js中使用

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

1.4使用效果

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

编译后结果:

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

1.5注意点

  • 在处理动画animation的关键帧keyframes,动画名称必须先写。比如,animation: deni .5s,能正常编译; animation: .5s deni, 则编译异常

  • 记得配置css-loader,否则不会生效。

  • 若使用的是style-loader,则需配置更换为vue-style-loader才可生效。

  • css modules如何解决权重问题?
    允许通过重命名或命名空间来封装样式规则,减少对选择器的约束,从而达到不需要特定方法就可舒服的使用类名。
    当样式规则耦合到每个组件时,当不再使用组件时,样式也会被移除。

二、Scoped

2.1实现原理
vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的。无法完全避开css权重和类名重复的问题。
2.2使用方法
在 < style >标签添加 scoped属性
2.3使用效果

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

编译后结果:

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

2.4缺点

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

  • 根据css样式优先级的特性,scoped这种处理会造成每个样式的权重加重,引用 使用了scoped的组件
    作为子组件,修改子组件的样式变得很难,可能迫不得已只能用!important

  • scoped会使 标签选择器 渲染变慢很多倍,用标签选择器时scoped会严重降低性能,而使用class或id则不会

以上就是关于“css的scoped css和css module有哪些区别”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网node.js频道。

--结束END--

本文标题: css的scoped css和css module有哪些区别

本文链接: https://www.lsjlt.com/news/88860.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作