Discussion on: How to import Sass/SCSS mixins global?

Hey Jordan,

First of all. Thanks for your support. After searching and testing I started to use CRACO (Create React App Configuration). CRACO is an easy and comprehensible configuration layer for create-react-app based on the structure of Webpack. It kinds of overwrites the rules of webpack you specify in the craco.config.js file. With the plugin craco-sass-resources-loader I managed to load a global SCSS file called utils.scss:

const sassResourcesLoader = require('craco-sass-resources-loader');

module.exports = {
  mode: "development",
  output: {
    path: __dirname
  },
  plugins: [
    {
      plugin: sassResourcesLoader,
      options: {
        resources: './src/assets/scss/utils.scss',
      },
    },
  ]
};

In the utils.scss I simply import all the main SCSS files I wanna use (think of mixins, breakpoints etc.):

/* import scss utilities */
@import './breakpoints';
@import './mixins';