Is it advisable to use only one base SCSS @use import throughout the entire React application?

Question

Is it advisable to use only one base SCSS @use import throughout the entire React application?

Hey there, I've got a question that's been on my mind. I really enjoy using SCSS in React, but for the longest time, I steered clear of variables and mixins because dealing with imports after making changes was a complete nightmare for me (I had a separate SCSS file for each component).

But then I stumbled upon a solution - I could easily create absolute paths in React imports like this:

import "src/scss/variables"

Now, I'm back to feeling excited about exploring all the amazing features SCSS has to offer.

So here's my question - can I create a single global.scss file and use only this file throughout my whole app when importing styles into different SCSS files? For example, the global.scss file would have contents similar to this:

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

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

And in the components.scss file, I would simply import it like this:

@use "src/scss/global"

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

Another thing I'm curious about is whether it's possible for these globals to be imported just once in the main.jsx or app.jsx files and then automatically utilized in all other files within the project?

css reactjs sass

Answer 1

Answer №1

If you want to consolidate all your variables, mixins, and functions into a single file, you can achieve that easily. The approach you mentioned is on the right track, but remember to use @forward instead of @use:

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

Ensure that these three files are declared as partials.

Importing the global.scss file directly in your .jsx file may be unnecessary since it contains no styles. However, you can configure your bundler to automatically include it in all your .scss files.

For instance, if you are using webpack with sass-loader, utilize the additionalData option:

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

In case you encounter an error related to an @import loop, exclude the global style files to prevent automatic importing:

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

    // Define the path where your global files reside
    const styleGlobalPathRegex = /^src\\scss\\.*/;

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

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

For users of Vite, incorporate it by utilizing css.preprocessorOptions:

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

Answer 2

If you want to consolidate all your variables, mixins, and functions into a single file, you can achieve that easily. The approach you mentioned is on the right track, but remember to use @forward instead of @use:

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

Ensure that these three files are declared as partials.

Importing the global.scss file directly in your .jsx file may be unnecessary since it contains no styles. However, you can configure your bundler to automatically include it in all your .scss files.

For instance, if you are using webpack with sass-loader, utilize the additionalData option:

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

In case you encounter an error related to an @import loop, exclude the global style files to prevent automatic importing:

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

    // Define the path where your global files reside
    const styleGlobalPathRegex = /^src\\scss\\.*/;

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

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

For users of Vite, incorporate it by utilizing css.preprocessorOptions:

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

Is it advisable to use only one base SCSS @use import throughout the entire React application?

Answer №1

Similar questions

Having trouble getting the map function to work in ReactJs while using Next.js?

The transformation from className to class attribute does not occur for custom elements in JSX

As a React developer, it's essential to understand how to trigger a callback event in a child

What is the best way to vertically align Bootstrap Columns to ensure they have consistent heights?

Adjust the value of a cell in the MUI Data Grid in real-time

Stepper that is vertical combined with table information

Is it possible to populate a ReactJS TreeView with a JSON/array of objects using Material UI?

What are the steps to achieve such a design?

Is it possible to copy text from an iframe to the clipboard?

Tips for sorting through existing data without resorting to a remote call - Material Table repository by mbrn (mbrn/material

Deploying the in-house API to operate on a publicly accessible domain

The server is failing to route the Django resource correctly, resulting in an error message "Failed to load resource: the server responded with a status of 404 (Not Found) main.7ec538f6.chunk.js:1"

What is the best way to globally install all necessary packages and dependencies?

Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

Is the return value of cache.readQuery in Apollo a copy of the data?

The Material UI Multiple Select is not displaying all of the selected items, which may be due to a CSS problem

Guide on Modifying the CSS File of an Installed Plugin on WordPress

Having trouble publishing project on Vercel because of a naming issue

You cannot edit FabricJS IText (and Textbox) within the context of React Bootstrap

React.js with Typescript is throwing an error stating that a property does not exist on the child component