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>