Rails 7: Shakapacker and ReactOnRails Quick Setup (Part 2) •WIP•

For Part 1 of this tutorial, see this post.

11/ Adding Imported Images to a Component through Webpacker

12/ Adding Imported CSS to a Component through Webpacker

SAVE AND COMMIT YOUR CHANGES BEFORE MOVING ON.

13/ Switching to Typescript

SAVE AND COMMIT YOUR CHANGES BEFORE MOVING ON.

14/ Hot Module Reload & Live Reload

hmr: false
If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure that you add style-loader to your project dependencies.

If you want to instead deliver CSS via with the mini-extract-css-plugin, set inline_css to false. In that case, style-loader is not needed as a dependency.
mini-extract-css-plugin is a required dependency in both cases.

inline_css: true
Defaults to the inverse of hmr. Uncomment to manually set this.

live_reload: true

15/ Server-side Rendering