CSS没有从.scss文件中获取css

Question

不确定我想念什么...

我确实尝试过使用css和scss以及.scss文件中的不同组合。仍然我看不到（在Inspect Element中）它正在从引导程序中获取CSS。

是的，我确实在相应的路径中包含引导css和scss文件。

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

我的其他应用看起来不错

更多信息（如果可以提供任何线索）。不确定是否是因为mat-side-nav

Answer 1

您不需要导入这些代码行

@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';

由于您已经在angular.json中包含了css文件。使用您当前的代码，您将拥有多余的代码

Answer 2

要在应用程序中使用 Bootstrap 样式，您需要：

1. 首先，您需要安装Bootstrap：npm install –save bootstrap

2. 您应在styles.scss中添加导入：

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

3. 添加样式的angular.json文件声明：

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

Answer 3

样式 实际上来自bootstrap.min.css，但是您的浏览器检查器正在显示SASS源地图。

了解更多：why inspections showing scss file instead of bootstrap.css?

了解如何在inpsection工具中禁用SASS映射： Disable source maps in Chrome DevTools