score:14

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:

Edit React Parcel with SASS imports


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.


Related Query

More Query from same tag