【React】dva-cli创建脚手架后发现页面样式不对的问题

用dva-cli做为脚手架创建工程后，开始尝试编写页面。而后立马发现一个坑爹的问题。

在我less文件里面写了一个class ,好比：MainHead。

可是编译出来以后发现css文件里面变成了 MainHead__xuaz，多了一个后缀，坑爹嘛这是！！！

一番查找后发现原来是引用了css-modules这个包。

为了卸载这个包，我翻找了半天。照例来讲应该在webpack的时候屏蔽这个包。

惋惜node项目不知道说封装了太好了仍是怎么的，dva生成的脚手架里面根本就没有webpack.config.js这个包。

终于，在个人不懈努力下终于发现问题的主因了。

缘由就在于dva是用一个叫rodhog的工具打包的。

在root目录下，有一个叫.roadhogrc的配置文件。

打开这个文件，里面有一个【disableCSSModules】的配置项。默认是false，启动css-modules，只要将它改为true，就能够屏蔽掉css-modules了。

 

-----------------------------------------------------------------一年后的分割线--------------------------------------------------------------------------------------------------

由于项目时间关系，转而使用相对简单易懂的Vue来开发项目。

吭哧吭哧整了一年终于将项目完结，从新拾起React后，发现本身犯了一个很基础的错误。

 

react里使用css-modules是正确的。目的是防止组件间的css名称污染。

而react中调用less中的class时，应该使用className，这样编译的时候能保证组件中的class名和less中的class名保持一致。

 

如此粗浅而深入的教训实在是使人惭愧。同时也证实入门的时候要找本好的入门教程，先看书再看代码，好过直接上手代码。