The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:

npx create-react-app my-app

After that, React sets up a full development environment with css files you can edit to style your code.

If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:

npm i sass --save-dev

(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support

Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.

CSS modules are a bit overrated if you just pick and use a decent prefix for all class names, although you're definitely overstating the tedium However, I think you're a bit misunderstanding what webpack does for you: > I guess another alternative to what I've been doing would be to have the Sass files in the same folder as their respective components and then still import everything into the main Sass file To be clear, this is the best pattern: component-scoped styles sit in a folder alongside the component JSX/TSX file, and they only impact that component. However, you don't need to "import everything into the main sass file", you just do this: MyComponent index.tsx style.scss MyComponent/style.scss: .PrefixedMyComponent { border: 1px solid var(--theme-border); border-radius: 8px; ... } MyComponent/index.tsx: // dependencies import React from 'react'; // styles import './style.scss'; export interface IMyComponentProps { children: any; // I have a type called RenderableContent for this situation } export function MyComponent(props: IMyComponentProps) { return {props.children}; } Then webpack makes one big browser-compatible CSS file for you when you run the "build" command

What I’d do is have a global CSS file to store common things that cover the whole app, background Color’s, box sizing, reset etc. And then each component that requires styles will have its own file. If you are wanting variables for common things like spacing, Color’s etc, look up design tokens on how that can be done. Usually just a second global file called “tokens” or “design”. Honestly with this pattern you probably don’t need SCSS at all and can use plain CSS instead to remove the Ruby dependency, but if you’re more comfortable with it then do it up.