美文网首页
dva项目中 cssModules

dva项目中 cssModules

作者: 桂老七 | 来源:发表于2018-12-28 17:54 被阅读0次

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文件也直接导入,不做转换

相关文章

网友评论

      本文标题:dva项目中 cssModules

      本文链接:https://www.haomeiwen.com/subject/zaeelqtx.html