【react】CSSModule css模块化

CSSModule css模块化

传统的css提倡与html分离开,便于管理且可移植性强。
react的css提倡模块化管理,将css嵌入到js中,这样不会污染到全局。

如何实现:

参考链接:http://blog.csdn.net/kun5706947/article/details/52596766

1.使用style-loader和css-loader将css嵌入到js中

webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

2.使用CSS modules处理,避免全局污染

CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。
Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题。

初学踩坑

1.在react组件内引入css时,组件中的className需要通过引入的样式来声明,如果直接声明,那么css中相应的样式就不会起效。
原因: css modules为了防止全局污染,会把css文件中的类名换为hash值,即原类名不存在,只能通过相应的hash值取得样式。

比如:

在ListItem中引入style,在控制台中输出style是这样的:

style的输出

userImg是一个类名,它在js中最后被替换为’_1Mg9kL_n3wNMjzfPVvifCV’,userImg不再存在。如果在组件中写userImg的话,那最终是没有对应的样式的。因此我们只能通过sytle.userImg取得’_1Mg9kL_n3wNMjzfPVvifCV’来获取相应的样式。

//wrong
import style from './ListItem.css';

class ListItem extends React.Component{
    render(){
        var msg = this.props.msg;
        return(
            <li>
                <div className='userImg'>
                    <img src={msg.img}/>
                </div>
            </li>
        );
    }
}

//right
import style from './ListItem.css';

class ListItem extends React.Component{
    render(){
        var msg = this.props.msg;
        return(
            <li>
                <div className={style.userImg}>
                    <img src={msg.img}/>
                </div>
            </li>
        );
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值