reactjssassdart-sass

Effectively Using SASS/SCSS


At work, I've been using SCSS for a few years. I've now just started my own React project and want to use it as well. To this end I installed dart-sass. I prefer building React component "bundles" where a folder with the same name as the component (ex. Button) contains the following files:

The main point here is that I mostly prefer the *.module.scss approach because it keeps the styles isolated.

However, I realize that there will be occasions for global styles. To this end, I've created a sass/styles.scss file into which I can import partial style files like _variables.scss, _fonts.scss, etc.

What I'm unclear on is where should I best be importing styles.scss? The highest level files, index.tsx or App.tsx seem like candidates but I'm hoping that the community could give me some best practice tips on this. Thank you.


Solution

  • That depends on the nature of the different SCSS files. Bear with me if I repeat anything you know already, I try to make my answer somewhat comprehensive.

    // App.scoped.normalize.module.scss
    @import "style/font";
    
    .app-scoped-normalize {
      &, *, ::after, ::before {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
      }
    
      font-family: $bodycopy-font-family;
      color: var(--font-color);
      font-size: $font-size-regular;
      line-height: $line-height;
      
      h1, h2, h3, h4, h5, h6 {
        font-family: $heading-font-family;
      }
    
      ul, ol {
        list-style: none;
      }
    }
    
    // App.tsx - here import order is relevant if css rules have equal specifity
    import normalize from './App.scoped.normalize.module.scss';
    import colors from './App.scoped.colors.module.scss';
    import style from './App.module.scss';
    
    // ...
    
    return (
      <div className={classnames(
        normalize.appScopedNormalize,
        colors.appScopedColors,
        style.appRoot,
      )}>
      // ...
      </div>
    );
    
    // index.tsx
    import './global.scss';
    import { App } from './App';
    
    // ...render App...
    

    As others have pointed out, you could import any global styles in App.tsx. I always try to reach a lucid mental model of all involved parts, and translate that mental model into code to the best of my abilities; and to me it feels more natural to keep the globals out of the App.tsx. And it helps with keeping the order of imports clear.