javascript – SassError : Prime-level selectors could not comprise the mother or father selector “&” $:: webkit-input-placeholder

I’m making an attempt to run an outdated create-react-app which makes use of Sass. Once I run npm begin, I first received the next error ‘Can not discover module sass’ with the identical kind of message as this Can not discover module ‘sass’ after which I attempted eradicating node modules, putting in npm react-scripts after which npm set up however now after I run the command ‘npm begin’ we get the next error ‘

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].guidelines[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].guidelines[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].guidelines[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].guidelines[1].oneOf[7].use[4]!./src/App.scss)
Module construct failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: Prime-level selectors could not comprise the mother or father selector "&".
   ╷
10 │     &::-webkit-input-placeholder {
   │     ^
   ╵
  srcscss_mixins.scss 10:2            placeholder-color()
  srcscssbasic_typography.scss 59:1  @import
  srcscss_style.scss 7:9              @import
  srcApp.scss 1:9                      root stylesheet

my package deal.json is as beneath

{
  "identify": "tf-react",
  "model": "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": {
    "begin": "react-scripts begin",
    "construct": "react-scripts construct",
    "take a look at": "react-scripts take a look at",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "manufacturing": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "growth": [
      "last 5 chrome version",
      "last 5 firefox version",
      "last 5 safari version"
    ]
  }
}

App.js contains App.scss and App.scss contains the next

@import './scss/fashion';

And the scss/_style file is as beneath

/** @format */

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

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

@import "elements/button";
@import "elements/pagination";
@import "elements/header";
@import "elements/socialicons";
@import "elements/title";
@import "elements/progress";
@import "elements/service";
@import "elements/portfolio";
@import "elements/resume";
@import "elements/testimonial";
@import "elements/kind";
@import "elements/weblog";
@import "elements/blogdetails";
@import "elements/notfound";

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

// Colour variations
@import "primary/gentle";

Under is the mixins.scss file

@mixin clearfix() {
    &::after {
        content material: "";
        clear: each;
        show: desk;
    }
}

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

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

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

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



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

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

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



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

    @else if $worth==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 $worth==c {
        background:linear-gradient($deg#{deg}, rgb(40, 172, 225) 12%, rgb(81, 204, 231) 50%, rgb(122, 235, 236) 91%);
    }
}

And beneath is the file construction

Node model I’m utilizing is
v18.14.0

Thanks for anyhelp!