【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名保持一致。

 

如此粗淺而深入的教訓實在是使人慚愧。同時也證實入門的時候要找本好的入門教程，先看書再看代碼，好過直接上手代碼。