当前位置 : 主页 > 网络编程 > 其它编程 >

css的scopedcss和cssmodule有哪些区别

来源:互联网 收集:自由互联 发布时间:2023-07-02
这篇“css的scopedcss和cssmodule有哪些区别”文章的知识点大部分人都不太理解,所以自由互联小编给大家总结了以下内容,内容详细,步骤清晰,具有一 这篇“css的scoped css和css module有哪
这篇“css的scopedcss和cssmodule有哪些区别”文章的知识点大部分人都不太理解,所以自由互联小编给大家总结了以下内容,内容详细,步骤清晰,具有一

这篇“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:{//开启CSSModulesmodules:true,//自定义生成的类名localIdentName:[local]_[hash:base64:8]}}]}]}
    • 在vue模板中通过一个动态类绑定来使用它

    Thisshouldbered

    AmIred?

    Redandbold

    • 在js中使用

    1.4使用效果

    Imgray

    编译后结果:

    //编译结果Imgray

    .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使用方法 在

    编译后结果:

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

    2.4缺点

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

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

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

上一篇:WindowsXP系统任务栏实用技巧总集
下一篇:没有了
网友评论