使用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共用

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。