css、sass、less模块化的意义

一、css、sass（scss）、less模块化的意义

如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，为了解决这个问题，产生出了 CSS 模块化的概念。CCS模块将作用域限制于组件中，从而避免了全局作用域的问题。我们再也不用操心为组件寻找一个好的命名了，因为编译过程已经帮我们完成了这个任务。

二、项目遇到的问题

基于cerate-react-app脚手架新建了一个项目。然后使用如下图的方式导出sass文件，发现了在浏览器中审查元素发现对应的DOM节点也没有我定义的类名，打印的对象也为空，样式根本没生效。

审查元素发现：

控制台打印：

三、解决的方法

前情：react官方脚手架创建项目的时候没有webpack的一些相关配置，这时候我们可以通过yarn eject命令将webpack的相关配置属性暴露出来。

执行yarn eject后可看到项目文件中多了个config的文件夹，如下图所示

打开webpack.config.js文件，找到sass-loader的相关配置，加入下图框中的代码，（其中的函数方法，当前文件中已经导入的，直接使用即可）

保存代码重启项目发现，虽然样式生效了，但DOM节点上的样式类名不是我们自己定义的类名，它自动加上了前缀后缀。

打开getCSSModuleLocalIdent函数，不难发现图中的fileNameOrFolder就是当前样式文件名,作为最终生成样式类名的前缀，localName就是我们自己写的类名，hash就是一个哈希值作为最终样式类名的后缀

这样保证了最终打包后的文件不会出现class类名的重复