css is not being applied to buttons using sass and bootstrap

Question

I am working onto a page using sass and Bootstrap 4 but then the css is not being applied.

My folder structure:

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

In my styles.scss I have the following:

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

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

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

On my layouts I have:

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

or

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

My button code:

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

But my styles.scss is not applied to any of my buttons.

If I use:

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

Then it applies only the Bootstrap, not the .scss stylings. Any help is appreciated, please let me know where I am going wrong.

Did you try to override using the `$theme-colors` map ? https://getbootstrap.com/docs/4.0/getting-started/theming/#modify-map — Arkellys, Oct 12 '18 at 06:22
have a look at this link https://getbootstrap.com/docs/4.0/getting-started/theming/ — Juned Lanja, Oct 12 '18 at 06:34
may be you needs to change `@import "../node_modules/bootstrap/scss/bootstrap";` to `@import "node_modules/bootstrap/scss/bootstrap";` — Juned Lanja, Oct 12 '18 at 06:35
@Tested which scss to css modules you are using. https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 — Ankit Gupta, Oct 12 '18 at 06:51
@JunedLanja $body-bg: #e2322e; $body-color: #111; works not the buttons — Tested, Oct 12 '18 at 06:51
if you are not aware of scss to css coversion please go through below link.https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 — Ankit Gupta, Oct 12 '18 at 06:53
@AnkitGupta m newbie have started working onto it everthing works just that change in sass not appling onto buttons — Tested, Oct 12 '18 at 06:57
You've already asked this: https://stackoverflow.com/questions/52759124/sass-bootstrap4-is-not-getting-applied-to-my-html-file .. you can't link to SCSS files. They must be compiled to CSS. — Carol Skelly, Oct 12 '18 at 07:00
@Tested https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275 — Ankit Gupta, Oct 12 '18 at 07:03
@Zim there was an import issue and this is a different question — Tested, Oct 12 '18 at 07:06

score -1 · Accepted Answer · answered Oct 12 '18 at 07:03

-1

thanks everyone for your great help the following worked cheers :)

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

answered Oct 12 '18 at 07:03

Tested

761
4
16
38

css is not being applied to buttons using sass and bootstrap

1 Answers1