dva项目中的样式

1.dva里的roadhog 默认会开启cssModules

配置文件：

"disableCSSModules":false

index.css文件：

.head {
    margin: 0 15px;
}

组件：

...
import styles from './index.css';
function Index(){
  return(
    <div className={style.head}>局部样式<div>
    <div className={style['head']}>局部样式<div>
  )
}
export default Index;

style.head会变成类似于index_xxx_head的形式，保证类名不重复（相当于把head类变成了index_xxx_head类，保证只在局部作用）。

2. 可以手动关闭roadhog的cssModules或者在css样式文件里面添加 :global() 来转成全局样式。

配置文件

"disableCSSModules":true

index.css文件

:global(.head) {
    margin: 0 15px;
}

组件：

...
import './index.css';
function Index(){
  return(
    <div className="head">全局样式<div>
  )
}
export default Index;

上面这种形式会组件渲染后class即为head，index.css文件也直接导入，不做转换