css module

常见的样式的添加方式

<div className='wrap'>
    <Slide rotationMap={this.state.rotationMap}/>
</div>

除此之外，还有另外的方法，使用之前要先开启css module，在webpack中添加 modules:true的配置

{
    test: /\.scss$/,
    exclude:[/node_modules/],
    use:[
       {loader:'style-loader'},
       {
           loader:'css-loader',
           options:{
              modules:true
           }
       },
       {loader:'sass-loader'}
     ]
 }

使用步骤

1）首先引入css

import home from './index.scss';

写法有以下两种

1）

<div className={home.wrap}>
    <Slide rotationMap={this.state.rotationMap}/>
</div>

2）

<div className={home['wrap']}>
    <Slide rotationMap={this.state.rotationMap}/>
</div>

如果变量名称是几个字符的拼接，如lg-orders就必须使用第二种写法

<div className={home['lg-orders']}>
    <Slide rotationMap={this.state.rotationMap}/>
</div>