css - 如何在不重建的情况下改善浏览器内 CSS/React 开发体验?

标签 css reactjs create-react-app

我的团队维护着一个旧的 coffeescript+knockout UI,我们正在慢慢用现代 React 代码替换其中的部分。该元素有一个复杂的构建系统,但我们已经能够将 create-react-app Hook 到其中并将捆绑的文件注入(inject)到主应用程序中。这可行,但重建成本高昂。

我如何通过在浏览器中编辑我们可以编辑的任何内容来改善我们的开发体验,而不是等待每次更改都进行完全重建?

在某些情况下,我们可以只使用很棒的 CRA 开发服务器,但我们经常依赖应用其余部分的样式和代码,因此很难完全隔离地处理每个组件。

谢谢!

最佳答案

对于 CSS,您始终可以使用浏览器的开发工具来更改样式,直到它看起来不错,然后您从开发工具复制到您的应用程序并且只需要重建一次。

对于 JS 你可以使用 Hot Module Replacement (HMR) 作为 webpack 插件(不包含在 CRA 中,您必须 eject )。

关于css - 如何在不重建的情况下改善浏览器内 CSS/React 开发体验?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46017822/

相关文章:

css - 通过css3中的文本更改颜色

javascript - 如何遍历 localStorage 值

reactjs - 将 WebWoker 与 create-react-app 和 typescript 一起使用

reactjs - 使用 create-react-app 的多个入口点

javascript - 固定网站加载时间?

html - 在页面中心对齐 span 的文本

reactjs - 使用 Link 模块的 Next.js 页面未通过 CSS 导入加载文件

create-react-app - 从自定义模板创建时找不到创建 react 应用模板模块

jquery - 如何在 JQuery datepicker 中选定日期范围内设置第一个和最后一个元素的样式?

javascript - redux 多个连接到一个容器