css не применяется к кнопкам, использующим sass и bootstrap

Question

Я работаю над страницей, используя sass и Bootstrap 4, но тогда css не применяется.

Структура моей папки:

scss 
   styles.scss
   styles.css
   styles.css.map
node_modules 
   all sass n bootstrap files
layout.html
package-lock

В моем styles.scss У меня есть следующее:

$primary: #3498db;
$secondary: #e67e22;
$success: #2eeeff;
$danger: #e74c3c;

@import "../node_modules/bootstrap/scss/bootstrap.scss";

/*# sourceMappingURL=styles.css.map */

На моих раскладках у меня есть:

<link href="scss/styles.scss" rel="stylesheet" />

или

<link href="scss/styles.css" rel="stylesheet" />

Код моей кнопки:

<div class="col-md-auto col-4">
   <button class="btn btn-lg btn-primary mr-1">Primary</button>
</div>
<div class="col-md-auto col-4">
   <button class="btn btn-lg .btn-success">Primary Outline</button>
</div>
<div class="col-md-auto col-4">
   <button class="btn btn-lg .btn-danger">Primary Active</button>
</div>

Но мой styles.scss не применяется ни к одной из моих кнопок.

Если я использую:

<link href="scss/styles.css" rel="stylesheet" />

Тогда он применяет только Bootstrap, а не стили .scss.Любая помощь приветствуется, пожалуйста, дайте мне знать, где я иду не так.

Answer 1

спасибо всем за вашу большую помощь следующие работали ура:)

 $body-bg: #e2322e;
 $body-color: #111;
 $theme-colors: (
"primary": #ffffff,
"success": #000000
);