Why does the SASS compiler add a new class to the css instead of making changes, and how can I make it work without !important?

Question

css

Added node-sass-chokidar to the project on create-react-app and bootstrap 4 sass
everything works, css is compiled.

"scripts": {
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",

    "build-css": "node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles --watch --recursive",

    "build": "npm run build-css && react-scripts build"
  }

There is index.sass

// New color
$new-color: #6d314b;

.btn-primary {
  background-color: $new-color !important;
}

which, when compiled, turns into css and adds on top

.btn-primary {
  background-color: #6d314b; }

which only works if you add !important as the old class remains unchanged.
How to make changes instead of adding a class or making it work without important ?

Answer 1

Move the class below the one that already exists. or create a new file and connect it last and make changes to it already.