React css 模块化在webpack中配置

引入三个模块

1. css loader
2. style loader
3. babel-plugin-react-html-attrs

按需加载css模块

只有当前组件需要该模块的时候，才加载该模块css style

css 文件以require方式当做引入

import React from 'react';

var footerCss  =  require("../../css/footer.css");

export default class ComponentFooter extends React.Component{
  render(){
    console.log(footerCss);
    return (
      <footer class={footerCss.miniFooter}>
        <h1>这里是页脚，一般放置版权的一些信息。</h1>
      </footer>
    )
  }
}

使用方式：

<footer class={footerCss.miniFooter}>

定义全局css

默认为局部使用:local(.btn)(color:red)
定义全局 :global(.btn)(color:red)

优势

1.所有css为局部的，不会相互污染。
2.依然使用css, 无缝成本
3.引入组件即可，不需要管理该组件的css