React react-app-rewired failing to import scss files

Question

So I have been given a project to work on that hasn't been touched for the last two years that it's using this react-app-rewired package. When I tried to install using yarn, I was having some errors regarding my node and python versions being incompatible with a node-sass package which is deprecated, so in order to install it, I used the same version as my partner has in this case Node: 12.22.5 and python: 2.5 and I have replaced the node-sass with sass and with this I was finally able to install it successfully (my parter can install and run it without any of this I don't understand why). Now, when I try to yarn start I keep having a lot of errors regarding scss imports

I never used react-app-rewired before, only custom webpack config, so I am not sure how to fix this. This is my config-overrides.js file

const { override, addBabelPlugin, addWebpackPlugin, addWebpackModuleRule } = require('customize-cra');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { DumpMetaPlugin } = require('dumpmeta-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');

const addEnvToManifest = new CopyWebpackPlugin([
  {
    from: 'public/manifest.json',
    to: 'manifest.json',
    transform(content, path) {
      const manifest = JSON.parse(content.toString());
      const { REACT_APP_ENVIRONMENT } = process.env;
      if (!REACT_APP_ENVIRONMENT.includes('master')) {
        manifest.name = `${REACT_APP_ENVIRONMENT}-${manifest.name}`;
        manifest.short_name = REACT_APP_ENVIRONMENT;
      }

      return JSON.stringify(manifest, null, 2);
    },
  },
]);

const copyWebComponents = new CopyWebpackPlugin([
  {
    context: 'node_modules/@webcomponents/webcomponentsjs',
    from: '**/*.js',
    to: 'webcomponents',
  },
]);

const generateVersionFile = new DumpMetaPlugin({
  filename: 'build/version.json',
  prepare: stats => ({
    hash: stats.hash,
    buildDate: new Date(),
    env: process.env.REACT_APP_ENVIRONMENT,
  }),
});

const imageOptimizationRule = {
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 100,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4,
        },
        gifsicle: {
          interlaced: false,
        },
      },
    },
  ],
};


const workbox = new workboxPlugin.InjectManifest({
  swSrc: './src/sw.js',
  swDest: 'sw.js',
  maximumFileSizeToCacheInBytes: 100 * 1024 * 1024,
});


module.exports = override(
  addWebpackModuleRule(imageOptimizationRule),
  addWebpackPlugin(copyWebComponents),
  addBabelPlugin('import-graphql'),
  addWebpackPlugin(generateVersionFile),
  addWebpackPlugin(addEnvToManifest),
  addWebpackPlugin(workbox)
);

My parter can install and start the project without any issues (intel Mac running Catalina). I have tried this on both my windows machine and on my M1 Mac running macOs Monterey 12.4 with no luck.

I would really appreciate any help you guys can give me.