Having only one base SCSS @use import in entire React application?

my question is pretty simple. I like using SCSS in React but I was avoiding variables/mixins etc. because for me it was just nightmare to fix all imports after reconstruction of something (I have one scss file for every component separately).

Than I figure out I can easily make absolute paths in React imports for example:

import "src/scss/variables"

Now I am again very excited to learn all good things SCSS can offer.

So my question is if I can create one global.scss file and use only this file in whole app when importing styles to different SCSS files. For example global.scss would look like this:

@use "variables"
@use "mixins"
@use "functions"

@forward "variables"
@forward "mixins"
@forward "functions"

And in components.scss I would just import:

@use "src/scss/global"


.test {
  background-color: global.$primary-color;
}

Another question is if there is any possibility that globals are just imported in main.jsx pr app.jsx and than already used in all files automatically?

It is indeed possible to have a single file for all your variables, mixins and functions. The example you shared is almost right, but you only need to use @forward and not @use:

@forward "variables";
@forward "mixins";
@forward "functions";

And make sure these three files are partials.

Importing this global.scss file in the .jsx is useless, since it doesn't contain any styles. However, what you can do is to configure your bundler to import it automatically into all of your .scss files.

For example, if you use webpack and sass-loader, you can use the option additionalData:

options: {
  additionalData: "@use \"src/scss/global\";"
}

If you get an error about @import loop, you need to exclude the global style files so they don't get the automatic import:

options: {
  additionalData: (content, loaderContext) => {
    const { resourcePath, rootContext } = loaderContext;

    // Assuming your global files are in this folder
    const styleGlobalPathRegex = /^src\\scss\\.*/;

    const relativeFilePath = path.relative(rootContext, resourcePath);
    const isAGlobalStyleFile = relativeFilePath.match(styleGlobalPathRegex);

    return isAGlobalStyleFile ? content : "@use \"src/scss/global\";" + content;
  };
}

If you use Vite, you can add it with css.preprocessorOptions:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: ...
    }
  }
}