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