css module 线上环境的命名规则

Question

最近看了几篇关于css module的文章，基本上文章里面都举例说明localIdentName在开发环境中的命名方式

然后在结束的时候说了一句线上环境可以缩短一下name的长度

1. css module在线上环境中有没有具体的命名规则

2. 个人感觉css module只是改变了样式的名称，其实样式还是全局的，如果使用了css module之后，出现同名的样式的话还是会造成样式的覆盖吧。

Answer 1

css module会根据设置将 class 编译成一个 md5 字符串，通常情况下，出现重名的几率是非常小的。
截个图给你看下：

class 已经变成了这样，重名的几率已经很小了

Answer 2

css module 命名是用css-loader自动编译的
webpack配置中 主要是这样配置的：

从上面的配置中可以看出 其命名规则

具体css文件中是这样写的：（我这里用的less）

就是在以前的css基础上前面加：local 告诉css-loader编译

然后在react组件中是这样写的：

上线的项目里css文件是这样的：

至于你说的 命名会重复的问题 几乎不可能了 况且 css module本来就是为了解决这个问题

Answer 3

webpack中有css loader可以自动编译和优化css以及css预处理器，我觉得充分利用好了这些工具，完全不需要自己手动去优化的。