CSS Modules 关于CSS模块化的方法 基于React

之前一直困惑如何实现CSS的模块化，特别是在使用了react之后，CSS的全局变量思想和React的组件化设计思想产生了严重冲突。之前也接触过一点react native的样式控制，类似Radium，jsxstyle，react-style，此类方法直接放弃css而通过js来控制样式，也是一种不错的解决方案，但是用了此方法之后，css的预处理器就无法使用了。下面是最近找到的一个特别优秀的解决CSS模块化的方法（依旧使用CSS处理）。

CSS Modules

使用起来很简单，只要会使用webpack就可以立马上手CSS Modules，在webpack配置文件里面设置如下：

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

在css-loader里面就可以使用CSS Modules，后来才知道CSS Modules是一个后来才并入css-loader的功能。

{    test: /\.css$/,    loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]'}

//此处可将类名设置成特定格式

我们随便写一个CSS文件

//style.css

.hello{    color:red;}

//entry.js

import styles from './style.css';import React, { Component } from 'react'; export default class ScopedSelectors extends Component {  render() {    return (        <p className={ styles.hello }>Scoped Selectors</p>    );  }};

另外，命名方式最好使用驼峰命名法，在JS中只能使用styles["btn-sp"]来调用.btn-sp而不能使用 styles.btn-sp来调用，这里需要注意一下。

CSS Modules 的GitHub链接参考文章：简单易懂的CSS Modules