基于react脚手架CRA3.0.1对css模块化和less模块

需求

对于css模块化和css预处理语言的模块化（less和sass）是前端开发环境搭建的时候必须要面对的问题。这方面网上有很多资料，有2篇文章写得挺好的：

1. CSS Modules 入门及 React 中实践
2. css模块化配置---webpack4+less

但是网上关于在CRA中配置css或less模块化的总结比较少,而且现在的默认webpack的配置已经不是直接修改的方式了，这里做下总结。

实践

在本文的项目中使用了react-app-rewired去启动CRA工程，其配套修改webpack的方式是通过 customize-cra这个项目去修改的。这2个项目在react的CRA中的实践大家可以参考其官网，这里简单说下。

1.通过npm安装完后先修改package.json里内容，如下图：

2019-11-01_225030.png

2. 在项目的根目录下将新建文件名为config-overrides.js的文件。

内容如下：

2019-11-01_230138.png

3. 然后像这样命名你的css或less文件（源码的正则就是这么识别的）

2019-11-01_230258.png

4. 在对应的js(jsx)中这样使用它

//header.jsx
import styles from './header.module.less'
class xxx extends React.component {
  ...
  render() {
      return (
          <div className={styles.loginbtn}></div>
      )
  }
}

对应的less文件

.loginbtn {
    color: rgba(255, 255, 255, 0.65)
}
.loginbtn:hover {
    color: #fff
}
.header-menu  {
    line-height: 64px;
    margin-left: 10em;
}
.login-font {
    color: #fff;
}

这样启动项目后css和less就可以模块化了，可以看下效果:

image.png

【完】