CODEWITHSUNDEEP
cssnode.jsangularsasssingle-page-application
SK.
SK.

Reputation: 1510

css not taking css from .scss file

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

enter image description here

My Other App looks fine enter image description here

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

Upvotes: 0

Views: 1319

Answers (3)

StepUp
StepUp

Reputation: 38094

To use Bootstrap styles in your application you need:

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

  2. You should add import in styles.scss: 

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

  3. Add into angular.json file declaration of styles:

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

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362380

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

Upvotes: 1

Tony
Tony

Reputation: 20092

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

Upvotes: 1

Related Questions