The Wayback Machine - https://web.archive.org/web/20201015165826/https://github.com/monajs/babel-plugin-react-css-modules
Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dev
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

readme.md

babel-plugin-react-css-modules

一款非常实用的 react-css-modules 插件

npm npm

背景

babel插件之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

About

babel-plugin-react-css-modules

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.