Почему компилятор SASS добавляет новый класс к css а не вносит изменения и как заставить это работать без !important?

Question

[Ninja Mate]

К проекту на create-react-app добавил node-sass-chokidar и bootstrap 4 sass
все работает, css компилируется.

"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"
  }

Есть index.sass

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

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

который при компиляции превращается в css и сверху добавляет

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

что работает только если добавить !important тк старый класс остается без изменений.
Как вносить изменения, а не добавлять класс или заставить работать без important ?

Comments

[Сергей delphinpro]

который при компиляции превращается в css и сверху добавляет

Ну так размещайте свои классы снизу.

Как вносить изменения, а не добавлять класс

Как насчет того, чтобы переопределять переменные бутстрапа? Они для того и заданы.

[Ninja Mate]

Ну так размещайте свои классы снизу.

Гениально!!! я бы сам не додумался. Спасибо

Как насчет того, чтобы переопределять переменные бутстрапа

вы имеете ввиду свой класс сделать или через @? можно ссылку на туториал или что вообще гуглить

[Ninja Mate]

Сергей, напишите как ответ, отмечу