小奋斗 - 轻松学习从此开始!
IT小奋斗群 QQ群:62017228

React CSS Modules 用法学习分享

原始代码:

--------------------------------------------------------------------------------------------------------------------------------------

import React from 'react';
import  './B.less' ;

export default  (props) => {
    function handleClick() {
        props.onChange("abc");
    }
    return <div className="myFirst" onClick={handleClick}>{props.name}</div>
}

--------------------------------------------------------------------------------------------------------------------------------------

改造后代码:

import React from 'react';
import style from './B.less' ;

export default  (props) => {
    function handleClick() {
        props.onChange("abc");
    }
    return <div className={style.myFirst} onClick={handleClick}>{props.name}</div>
}

--------------------------------------------------------------------------------------------------------------------------------------

原始配置:

{test: /\.less/, loader: "style!css!less"},

--------------------------------------------------------------------------------------------------------------------------------------

改造后配置:

{test: /\.less/, loader: "style!css?modules!less"},

--------------------------------------------------------------------------------------------------------------------------------------

改造前结果

class="myFirst"

--------------------------------------------------------------------------------------------------------------------------------------

改造后结果

class="_2iBp2IsSznFMX6CKbqGSAZ"

--------------------------------------------------------------------------------------------------------------------------------------

结论:放弃使用这个,因为经常设计师需要修改css样式,如果使用_3zyde4l1yATCOkgn-DBWEL这种类名,源代码与页面的关系被截断,不方便维护
并且Less 本身已经通过 继承关系解决了css 样式冲突问题,没有必要再使用这个技术

小奋斗文章

--------------------------------------------------------------------------------------------------------------------------------------

我来评几句
登录后评论

已发表评论数(0)