react CSS module 学习

原始代码：

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 样式冲突问题，没有必要再使用这个技术