react CSS module 学习
2016-12-28 12:16
302 查看
原始代码:
改造后代码:
原始配置:
改造后配置:
改造前结果
改造后结果
结论:放弃使用这个,因为经常设计师需要修改css样式,如果使用_3zyde4l1yATCOkgn-DBWEL这种类名,源代码与页面的关系被截断,不方便维护
并且Less 本身已经通过 继承关系解决了css 样式冲突问题,没有必要再使用这个技术
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 样式冲突问题,没有必要再使用这个技术
相关文章推荐
- RN3_CSS学习(react native 学习)
- React-Native_学习笔记1: Unable to resolve module Dimensions from “...js” Invalid directory /Users/node_m
- React学习资料+css进阶资料总结
- CSS学习第一章 HTML与CSS
- [DNN学习所得]HttpModule到底是个什么东西
- css学习的一些心得
- css学习的一些心得
- [DNN学习所得]HttpModule到底是个什么东西
- 实现网页设计标准--CSS学习收藏(1)
- CSS学习之第三章:单位和值
- CSS学习之第二章《选择符与结构》(4)
- 今天改变了CSS,向hbzxf(阿好)学习!!
- 一个学习CSS的很好的网站
- CSS学习之“颜色和背景”
- 学习CSS布局的一些思路
- css学习的一些心得
- php module 学习之(一) php module 初探
- CSS层叠样式的学习[2]
- CSS学习之第二章《选择符与结构》(1)
- CSS学习之“字体属性”