css mocules 使用

1.webpack配置

1.create-react-app 只要是webpack4版本的，都是支持的，可以再自行修改配置

const cssModuleRegex = /\.module\.css$/;

{
  test: cssModuleRegex,
   use: getStyleLoaders({
     importLoaders: 1,
     sourceMap: isEnvProduction && shouldUseSourceMap,
     modules: {
       getLocalIdent: getCSSModuleLocalIdent,
     },
   }),
 },

只要文件名以.module.css结尾都支持的，当然如果嫌麻烦，项目中不需要css，less文件等，也可以修改webpack配置，改成更简单的文件名

2.使用方法

普通使用方法1：

js文件：
import Style from './index.module.css';
<div className={Style.pageHeader}>这是内容</div>

indes.module.css文件：
.pageHeader{
  padding-bottom: 0px;
}

可以在控制台看到class已经被转译了，变成hash值。
具体的转变规则可以自行配置。

普通使用方法2：
我们会修改全局样式，或者修改组件库的样式，但是，不能直接添加className，这时候可以用到:global，用了:global之后类名将不会被css module转译成hash值

:global .s-upload-list-item{
  height: 32px;
  line-height: 32px;
  margin-top: 0;
}

在控制台，我们可以看到 我们复写了组件的样式。

使用还是很简单的。