淘先锋技术网

首页 1 2 3 4 5 6 7

在使用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无效的问题。