babel-plugin-react-css-modules
背景
安装
$ npm i --save-dev @monajs/babel-plugin-react-css-modules使用
字符串形式
const a2 = (
<div className='ssss fds ss'>
<div>{events.on}</div>
</div>
)数组形式
const b1 = (
<div className={['aaa', 'bbb', 'ccc ddd']}>
<div>{events.on}</div>
</div>
)
const b2 = (
<div className={['aaa', bbb, { 'bbb': this.isShow, ccc: true, 'ddd': false }]}>
<div>{events.on}</div>
</div>
)
const b3 = (
<div className={[this.classname(), { 'fd-ssss-fdfdfd': true }, 'sss-dd-dd']}>
<div>{events.on}</div>
</div>
)json形式
const c1 = (
<div className={{ 'aaa': true }}>
<div>{events.on}</div>
</div>
)
const c2 = (
<div className={{ 'aaa': true, bbb: events }}>
<div>{events.on}</div>
</div>
)
const c3 = (
<div className={{ 'aaa': true, bbb: this.ctrl.isShow, 'ccc': this.showClassname() }}>
<div>{events.on}</div>
</div>
)使用注意点
- 插件只会处理
string类型、array类型、json类型的CSS Modules转换，不会对模版字符串、字符串叠加计算等方式进行转换
联系我
微信：yx12032331