Adding a Sass Stylesheet

Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.

To use Sass, first install sass:

$ npm install --save-dev sass sass-loader
# or
$ pnpm add -D sass sass-loader

Then add the following to your webpack.config files:

{
    test: /\.(sa|sc|c)ss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader",
    ]
},

Now you can rename src/App.css to src/App.scss and update src/App.tsx to import src/App.scss. This file and any other file will be automatically compiled if imported with the extension .scss or .sass.

To share variables between Sass files, you can use Sass's @use rule. For example, src/App.scss and other component style files could include @use "./shared.scss"; with variable definitions.

This will allow you to do imports like

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

Note: You can prefix paths with ~, as displayed above, to resolve modules from node_modules.