在angular应用中多次导入bootstrap

Question

当我编译我的angular应用程序时，我得到以下错误:

498 │ $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
│                                                                         ^^^^^^^^^^^^^^^^^^^^
╵
........node_modulesbootstrapscss_variables.scss 498:73  @import
........node_modulesbootstrapscssbootstrap.scss 9:9      @import
......stylesbootstrap.scss 7:9                              root stylesheet

我包含的唯一saas脚本是stylesbootstrap.scss，它反过来导入bootstrap:

$body-bg: #fff;
$body-color: #111;
$blue: #2a5291 ;
$red: #b20d1c;
$gray: rgba(0,0,0,.1) ;
@import '../../node_modules/bootstrap/scss/bootstrap';

该脚本包含在angular.json:

"styles": [
"src/styles/bootstrap.scss"
],

我已经搜索了我的整个项目，找不到任何其他地方的引导被导入。为什么会有这些警告呢?它以某种方式自动包含吗?

Answer 1

当你在angular中包含任何样式时。json,然后他们成为您的项目在全球的风格的一部分。在该样式文件中所做的任何导入也将被添加到全局样式中。

因此，当你添加stylesbootstrap.scss的样式标签在角。Json(其中包括bootstrap节点模块)，这被添加到您的项目的全局风格，因此你得到这些警告。

出现此警告是因为sass团队已经弃用/而支持math.div

可以迁移到bootstrap v5.0.2为了避免这些警告。