React 中配置 CSS modules

使用Create React APP创建项目

npx create-react-app my-app
cd my-app
npm start

将React打包的配置文件释放出来

npm run eject

执行完上面的命令之后，会新增两个目录script/和config/。

在config/目录下可以看到两个配置文件webpack.config.js和webpackDevServer.config.js。如果你需要配置所需的功能，可以在webpack.config.js中添加配置。如果你需要将项目打包输出的话，还得配置webpack.config.prod.js。具体如何配置，这里不说了。因为太复杂了。在后面的内容，我们会聊聊Webpack中怎么配置CSS Modules（纯Webpack环境之下，即不依赖Create React APP构建的项目工程）。

这样配置完成就可以在React脚手架中使用CSS modules了

CSS modules的几种书写方法：

效果如下：

CSS Modules使用小技巧：
● 尽量使用class来定义样式
● 在CSS Modules中id声明的样式会被忽略，正好应了那句，少在代码中使用id
● CSS Modules最大特色是作用于本地（局部域），只用单个类来定义样式最佳
● 尽量避免组合选择器的运用，在CSS Modules中也没必要这么使用，有利于提高选择器性能
● 可以借助:global和属性选择器的小技巧来声明全局样式
● 借助Webpack的能力，让全局样式和局部样式共存（文件结构需要组织好）
● 使用class命名时（尽量避免中折-或–，应该尽量选择_或__连接）
● 尽量借助PostCSS能力，辅助你快速编写CSS代码
● 尽量借助CSS的自定义属性来替代CSS处理器的变量，虽然CSS Modules中引用的变量可以CSS和JavaScript共用