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 (
        
Scoped Selectors
    );
  }
};

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

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