Parcel: using separate SCSS files for each React component, but with a variables file

Welcome to stackoverflow! Great first post. Very informative, clear and to the point.

Ideally your shared SCSS will be partials and you will use the @import syntax instead of import.

From the Sass guide:

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Working example:

Some additional notes...

A subjectively "better" folder structure (see notes below for why):

  └── src      ├── assets      ├── components      |   |      │   ├── App      |   |   ├── __tests__      |   |   |   └── App.test.js      │   │   ├── index.js      │   │   └── styles.scss (App.scss)      |   |      │   ├── Taskbar      |   |   ├── __tests__      |   |   |   └── Taskbar.test.js      │   │   ├── index.js      │   │   └── styles.scss (Taskbar.scss)      |   |      │   └── Window      |       ├── __tests__      |       |   └── Window.test.js      │       ├── index.js      │       └── styles.scss (Window.scss)      |      ├── styles      |   ├── _mixins.scss      |   ├── _variables.scss      |   └── styles.scss (exports all shared partials)      |      └── index.js

• Avoid using index.scss for component-level stylesheets because when you start adding tests, you'll confuse Webpack as to which import you want if you just write import Component from "./index" without an extension. This has a 50/50 chance of throwing export is not a class or function errors. As a general rule of thumb, I will either use the same name as the parent folder or use styles and add the .scss extension to the import to differentiate that its unique from a normal .js import.
• Optional: You can import partials into a single non-partial file and import that file into each component-level stylesheet. See my example here. This saves some time from writing multiple @import statements over and over for each component-level stylesheet; but, has the disadvantage of importing everything when you may only want one thing.

And... if you're bored and have some time, I go into detail as to why I like this folder structure.