CSS模块遇到了哪些问题？*全局污染*命名混乱*依赖引入复杂性*无法共享变量*代码冗余CSSModules模块化解决方案CSSModules可以最大限度地结合现有的CSS生态和JavsScript模块化能力，其API非常简单，学习成本几乎为零.CSSModules实现了以下几点*所有样式本地化，解决了命名冲突和全局污染的问题*类名的生成规则可以灵活配置，可以用来压缩类名*参考类的JavsScript即可component来搞定component的所有JavsScript和CSS看下面的例子：importReactfrom'react';importstylefrom'./App.module.css';exportdefault()=>{return(HelloWorld);};App.css.title{color:red;}构建结果将类名style.title编译成哈希字符串。HelloWorld._3zyde4l1yATCOkgn-DBWEL{color:red;}CSSModules的特点+不使用选择器，只使用类名定义样式+不级联多个类，只使用一个类定义所有样式+不嵌套类+所有样式通过composes组合实现复用CSSModules语法ScopeCSS规则是全局的，任何组件的样式规则对整个页面都有效。生成本地作用域的唯一方法是使用一个唯一的类名，该类名不会与其他选择器同名。这就是CSS模块所做的。CSSModules默认的样式是localscope，同时也提供了显式的localscope语法：local(.className)，等价于.className。如果需要定义全局范围样式，可以使用:global(.className)语法声明全局规则。以这种方式声明的任何类都不会被编译成哈希字符串。:local(.title){color:red;}:global(.title){color:green;}CompositioncomposeofClass类样式重用，在CSSModules中，一个选择器可以继承另一个选择器的规则，优先级自己引入的语句会更高。注意：只能使用局部范围规则组合使用composes/*在同一个css文件中重用类*/.bg{background-color:blue;}.title{composes:bg;color:white;}/*css文件中不同的重用类*/.title{composes:bluefrom'./color.css';底部边框：1pxsolid#ccc；padding-bottom:20px;}/*全局样式使用*/.title{composes:text-bluefromglobal;底部边框：1pxsolid#ccc；padding-bottom:20px;}这个和预处理器的@extends语法很像，我们以Sass为例对比：.Button-common{/\*font-sizes,padding,border-radius\*/}。普通按钮{@extends.Button--common;颜色：蓝色；}.Button-error{@extends.Button--common;color:red;}编译成Aftercss:.Button-common,.Button-normal,.Button-error{/*font-sizes,padding,border-radius*/}.Button-normal{color:blue;}.Button-error{color:red;}然后，我们在HTML标记中使用样式名称来获得所需的通用样式和特定样式。让我们来看看CSSModules是如何处理的。common{/*font-sizes,padding,border-radius*/}.normal{composes:common;color:blue;}.error{组成:common;color:red;}在浏览器上，最终会编译成这样（样式命名规则由构建工具加载器配置）：.submit_button__common__abc5436{/*font-sizes,padding,border-radius*/}.submit_button_normal__def6547{color:blue;}.submit_button__error__1638bcd{color:red;}使用js中importstylesfrom"./submit-button.css"返回的对象，可以看到最终记录了多个样式名称。styles:{common:"submit_button_common__abc5436",normal:"submit_button_common_abc5436submit_button_normal__def6547",error:"submit_button_common_abc5436submit_button_error__1638bcd"}这是composes的一个强大功能，你可以组合多个选择器而无需重写CSS样式或更改它们。嵌套CSS模块允许嵌套定义，但不推荐这样做。.title-bar{height:48px}.title-bar>ul{text-align:center}.titel-bar:global(.cell){padding-left:10px}通过配置与预处理器结合使用构建工具，可以与各种CSS预处理器一起使用，例如stylus@import"~@/assets/css/vendor".logowidth:200pxtext-align:center&:hoverbackground:$bg/*vendor中定义的变量*/.round{display:inline-blockwidth:30pxheight:@widthline-height:@widthborder-radius:50%composes:bg-mainfromglobal;}参考链接+CreateReactApp+Vue-loader+react-css-modules+CSSModules：欢迎来到Future+CSSModules使用教程
