SassError : Top-level selectors may not contain the parent selector "&" $:: webkit-input-placeholder

Question

I am trying to run an old create-react-app which uses Sass. When I run npm start, I first got the following error 'Cannot find module sass' with the same type of message as this Cannot find module 'sass' and then I tried removing node modules, installing npm react-scripts and then npm install but now when I run the command 'npm start' we get the following error '

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
   ╷
10 │     &::-webkit-input-placeholder {
   │     ^
   ╵
  src\scss\_mixins.scss 10:2            placeholder-color()
  src\scss\basic\_typography.scss 59:1  @import
  src\scss\_style.scss 7:9              @import
  src\App.scss 1:9                      root stylesheet

my package.json is as below

{
  "name": "tf-react",
  "version": "4.6.0",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.27.2",
    "axios-mock-adapter": "^1.21.1",
    "bootstrap": "^5.1.3",
    "disqus-react": "^1.1.3",
    "fslightbox-react": "^1.6.2",
    "markdown-to-jsx": "^7.1.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
    "react-helmet": "^6.1.0",
    "react-lineicons": "^3.0.0",
    "react-masonry-component": "^6.3.0",
    "react-on-screen": "^2.1.1",
    "react-progressive-image": "^0.6.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "^5.0.1",
    "react-slick": "^0.29.0",
    "react-tsparticles": "^1.40.2",
    "sass": "^1.59.3",
    "sass-loader": "^13.2.1",
    "shave": "^4.0.0",
    "slick-carousel": "^1.8.1",
    "webpack": "^5.76.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 5 chrome version",
      "last 5 firefox version",
      "last 5 safari version"
    ]
  }
}

App.js includes App.scss and App.scss includes the following

@import './scss/style';

And the scss/_style file is as below

/** @format */

@import "variables";
@import "mixins";

@import "basic/reset";
@import "basic/typography";
@import "basic/utilities";

@import "components/button";
@import "components/pagination";
@import "components/header";
@import "components/socialicons";
@import "components/title";
@import "components/progress";
@import "components/service";
@import "components/portfolio";
@import "components/resume";
@import "components/testimonial";
@import "components/form";
@import "components/blog";
@import "components/blogdetails";
@import "components/notfound";

@import "pages/home";
@import "pages/about";
@import "pages/contact";

// Color variations
@import "basic/light";

Below is the mixins.scss file

@mixin clearfix() {
    &::after {
        content: "";
        clear: both;
        display: table;
    }
}

@mixin placeholder-color($placeholder-color) {
    &::-webkit-input-placeholder {
        color: $placeholder-color
    }

    &:-moz-placeholder {
        color: $placeholder-color
    }

    &::-moz-placeholder {
        color: $placeholder-color
    }

    &:-ms-input-placeholder {
        color: $placeholder-color
    }
}



// Gradient color
@mixin gradient-color($value, $deg) {
    @if $value==a {
        background:linear-gradient($deg#{deg}, #f71595 0%, #ed560e 62%, #ff9600 100%);
        background-clip: text;
        text-fill-color: transparent;
    }

    @else if $value==b {
        background:linear-gradient($deg#{deg}, rgb(251, 110, 57) 12%, rgb(252, 85, 93) 50%, rgb(253, 59, 128) 91%);
        background-clip: text;
        text-fill-color: transparent;
    }

    @else if $value==c {
        background:linear-gradient($deg#{deg}, rgb(40, 172, 225) 12%, rgb(81, 204, 231) 50%, rgb(122, 235, 236) 91%);
        background-clip: text;
        text-fill-color: transparent;
    }
}



// Gradient Background
@mixin gradient-bg($value, $deg) {
    @if $value==a {
        background:linear-gradient($deg#{deg}, #ffffff 0%, transparent 95%);
    }

    @else if $value==b {
        background:linear-gradient($deg#{deg}, rgba(223, 32, 32, 1) 0%, rgba(0, 0, 0, 0.6) 36%, rgba(0, 0, 0, 0.3) 100%);
    }

    @else if $value==c {
        background:linear-gradient($deg#{deg}, rgb(40, 172, 225) 12%, rgb(81, 204, 231) 50%, rgb(122, 235, 236) 91%);
    }
}

And below is the file structure

Node version I am using is v18.14.0

Here's a part of code from src\scss\basic_typography.scss 59:1

img {
  max-width: 100%;
}

@include placeholder-color($color-body);

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $ff-heading;
  color: $color-heading;
}

Thanks for anyhelp!