css not taking css from .scss file

Question

Not sure what am I missing...

I did try with css and scss and different combinations in .scss file. Still I don't see(in Inspect Element) it is taking the css from bootstrap.

Yes, I do have bootstrap css and scss files in the corresponding path.

angular.json

   "styles": [
      "src/styles.scss",
      "node_modules/bootstrap/scss/bootstrap.scss",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/font-awesome/css/font-awesome.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

styles.scss

@import '~bootstrap/scss/bootstrap';
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
@import '~bootstrap/scss/bootstrap.scss';

@import "styles-variables.scss";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~ng-pick-datetime/assets/style/picker.min.css";

My Other App looks fine

somemore information, if that can give any clue. Not sure if it is because of mat-side-nav

I'm confused. You can see the css for `form-group` and `col-sm-12` on the right, no? — David, Jul 25 '19 at 13:38
But that is coming from grid.scss. isn't it supposed to come from bootstrap ? — SK., Jul 25 '19 at 13:39
just add ../ to styles array like so "../node_modules/bootstrap/dist/css/bootstrap.min.css" instead of "node_modules/bootstrap/dist/css/bootstrap.min.css" and you do not need to add the sass packages to styles.scss. you either add the scss imports to styles.scss or to the styles array in angular.json — ErvTheDev, Jul 25 '19 at 13:46

StepUp · Answer 1 · 2019-07-25T14:25:58.110

2

To use Bootstrap styles in your application you need:

At first, you need to install Bootstrap: npm install –save bootstrap

You should add import in styles.scss:

@import "~bootstrap/dist/css/bootstrap.css";

Add into angular.json file declaration of styles:

...
"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
],
...

edited Jul 25 '19 at 14:25

answered Jul 25 '19 at 13:43

StepUp

36,391
15
88
148

I don't see the a "dist" directory in ~bootstrap directory. I only see 'scss' directory, and that has bootstrap-grid.scss and bootstrap-reboot.scss – SK. Jul 25 '19 at 14:18
@SK. it looke like Bootstrap is installed incorrectly. So try to uninstall `npm uninstall bootstrap` and then install `npm install –save bootstrap`. – StepUp Jul 25 '19 at 14:28

score 1 · Answer 2 · answered Jul 25 '19 at 13:40

You shouldn't need to import these line of code

@import '~bootstrap/scss/bootstrap';
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
@import '~bootstrap/scss/bootstrap.scss';

Since you already include the css file in your angular.json. With your current code you will have redundant code

score 1 · Answer 3 · answered Jul 25 '19 at 13:46

1

The styles are actually coming from the bootstrap.min.css, but you're browser inspector is showing the SASS source map.

Learn more: why inspections showing scss file instead of bootstrap.css?

Learn how to disable the SASS map in the inpsection tools: Disable source maps in Chrome DevTools

answered Jul 25 '19 at 13:46

Carol Skelly

351,302
90
710
624

you are right. I just realized. But not getting why it is not showing as it should be. My other app is perfectly fine. Added a screenshot from my other app. Any idea please... – SK. Jul 25 '19 at 13:51
Why are you including both the SCSS and CSS in the angular.json styles? – Carol Skelly Jul 25 '19 at 14:14
I tried with only css and only .scss, then I tried with both – SK. Jul 25 '19 at 14:19

css not taking css from .scss file

3 Answers3