babel-plugin-jsx-css-modules

通过 Babel 实现 JSX 中无感知使用 CSS Modules

不需要显式调用 styles 变量或自定义 props 如 styleName

需确保已启用 CSS Modules 功能

Babel 6/7 均可用

- - -

使用方法

1. 安装插件

``bash
npm install babel-plugin-jsx-css-modules --save
`

2. 配置 .babelrc 文件

`json
{
"plugins": [
"jsx-css-modules"
]
}
`
3. 调整构建配置以启用 cssModules 功能

启用方式可参考：

- https://github.com/css-modules/css-modules#implementations
- https://github.com/webpack-contrib/css-loader#modules
- https://github.com/css-modules/postcss-modules

注意：未启用 cssModules 功能的样式文件不会有效果

- - -

示例

`javascript
import './styles.module.scss'

const Example = ({ customerClassName }) => (


`javascript
import styles from './styles.module.scss'
const matcher = classNames =>
classNames.split(' ').map(className => styles[className] || className).join(' ')

const Example = ({ customerClassName }) => (


以上是对该插件运作方式的简单解释，实际上，matcher 函数还可完成对全局样式的甄选，参考如下说明

- - -

区分全局、局部样式

依照 cssModules 规则，在类名上拓展了 :global / :local 修饰器语法，以区分全局、局部样式

未添加修饰器的类名默认属于 :local 样式，此行为通过 prefer 参数修改

`javascript
import './styles.module.scss'

const Example = () => (