CSS Modules

React 项目一大特色就是组件化模块，但是css模块化之前一直没有接触过，google了一些资料，发现可以通过设置webpack.config.js来应用CSS Modules

简单的设置：

  module.exports = {
      devtool: 'eval-source-map',

      entry: ...,
      output: {...},

      module: {
        loaders: [
          ...,
          {
            test: /\.css$/,
            loader: 'style!css?modules'
          }
        ]
      },

      devServer: {...}
}

然后新建一个css文件（root.css）

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}

在js文件中引入css文件

import styles from './root.css';

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>

      </div>
    );
  }
}

export default Greeter

就ok了~~

---

进阶

1.支持scss

  module.exports = {
      devtool: 'eval-source-map',

      entry: ...,
      output: {...},

      module: {
        loaders: [
          ...,
          {
            test: /\.scss$/,
            loader: 'style!css?modules!postcss!sass?sourceMap=true', 
          }
        ]
      },

      devServer: {...}
}

2.默认编译出来是hash值唯一引用名称，需要自定义clss名称(modules&localIdentName=xxx)：

  module.exports = {
      devtool: 'eval-source-map',

      entry: ...,
      output: {...},

      module: {
        loaders: [
          ...,
          {
            test: /\.scss$/,
            loader: 'style!css?modules&localIdentName=[path][name]__[local]!postcss!sass?sourceMap=true', 
          }
        ]
      },

      devServer: {...}
}

3.局部作用域和全局作用域：
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

:global(.title) {
  color: green;
}

<h1 className="title">
      Hello World
</h1>

4.与全局样式共存（使用webpack配置）：

            { 
                test: /\.scss$/, 
                loader: 'style!css?modules&localIdentName=[path][name]__[local]!postcss!sass?sourceMap=true', 
                exclude: [/node_modules/,/styles/] 
            },
            { 
                test: /\.scss$/, 
                loader: 'style!css!sass?sourceMap=true', 
                include: /styles/ 
            }

本文参考：
1.Appendix A: Webpack for React
2.CSS Modules 用法教程
3.CSS Modules 详解及 React 中实践