css 不从 .scss 文件中获取 css

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

Answer 1

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

Answer 2

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" ], ...

Answer 3

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