原始代码:
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 样式冲突问题,没有必要再使用这个技术