• 技术文章 >Web开发 >css教程

    css module解决命名冲突

    小妮浅浅小妮浅浅2021-09-17 09:39:26原创3882

    css的类名冲突往往发生在大型项目中。

    1、大型项目往往会使用构建工具搭建工程。

    2、构建工具允许将css样式切分为更加精细的模块。

    同JS的变量一样,每个css模块文件中难以出现冲突的类名。

    3、冲突的类名往往发生在不同的css模块文件中,只需要保证构建工具在合并样式代码后不会出现类名冲突即可。

    实现原理

    在webpack中,作为处理css的css-loader,它实现了css module的思想,要启用css module,需要将css-loader的配置modules设置为true。

    css-loader的实现方式如下:

    原理极其简单,开启了css module后,css-loader会将样式中的类名进行转换,转换为一个唯一的hash值。

    由于hash值是根据模块路径和类名生成的,因此,不同的css模块,哪怕具有相同的类名,转换后的hash值也不一样。

    以上就是css module解决命名冲突的方法,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css module
    品易云
    上一篇:css中有哪些类型的样式表 下一篇:css global在类名的应用

    相关文章推荐

    • css定位叠放次序的使用注意• css中hack是什么• css中hack的原理• css中hack的3种表现形式• css中link和@import的区别• python中pyquery的CSS选择器用法• CSS简单常用属性的总结• CSS有哪些高级选择器• CSS伪类选择器是什么• CSS超链接a标签的状态• CSS背景颜色的表示方法• css中有哪些类型的样式表

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网