The <style> tag and React
michael chan

I know this may not be the best solution at scale, but for one-off apps or simple demos/builds, I “wrap” a create-react-app bootstrapped app in a directory that has a Sass source subdirectory.

Usually, I setup Grunt to watch Sass and other static assets like fonts, images, and HTML files, then perform the necessary transformations/tasks associated with each. (copy, Sass compilation, etc)

Grunt sends the distributed files to the configured directories inside the /app React directory.

Pros: I get Sass/autoprefixer/any other style “middleware” transformations, hot module replacement in CRA allows styles to change without re-rendering any components, keeps styles and JS separate (this is subjective)

Cons: No data-driven CSS values, adds a compilation step/increases scope and size of overall project

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.