在使用dva作为react应用框架时,我们经常会遇到引入的CSS无效的问题。这个问题的根本原因是在dva框架中,CSS Modules默认是开启的,而且使用了hash命名规则,导致我们引入的CSS样式在构建之后被自动修改,失去了原本的名称和属性。
// index.css .header { color: red; }
上述代码表示,在index.css中我们定义了一个具有red颜色的.header样式。但是在dva框架中,这个样式文件的后缀会被加上hash值,变成"index_a7d63.css",而.header样式也被替换成了"header_1xj2h"样式。
为了解决这个问题,我们需要使用dva提供的className类名获取方法,来动态获取样式。我们可以通过以下方式进行修改:
//index.js import styles from './index.css' function App() { return (Hello World!) }
上述代码表示,在index.js中,我们通过import导入了index.css的样式,并使用styles.header来动态获取.header样式。
通过这种方式,我们就可以在dva框架中正确引入和使用CSS样式,有效解决引入CSS无效的问题。