Angular 角度CLI:'；ng服务'；多次内联引导程序

我正在使用Angular CLI和Bootstrap 4。经过一番痛苦的安排，我准备出发了。一旦“ng服务”完成了内存构建，我打开应用程序，在检查了一些元素之后，我注意到引导类出现了多次

在检查

之后，我可以看到有

元素（3x），它们都包含引导类

我的应用程序设置如下：

- SRC
   |- APP
   |   |- TOOLBAR
   |   |      |- toolbar.component.scss
   |   |- app.component.scss
   |- app.scss
   |- variables.scss

在variables.scss中

@import "../node_modules/bootstrap/scss/bootstrap";
...

在app.scss、app.component.scss、toolbar.component.scss中

@import "./variables"

每次我添加另一个具有自己的scss类（导入“变量”）的组件时，都会添加另一个

内容，其中包含完整的Bootstrap.css

在my.angular-cli.json中

"styles": [
        "app.scss"
      ],

最后，在我的package.json中

"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.6.6",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"

},

你知道为什么它总是成倍增加吗？

确保

导入“./node\u modules/bootstrap/scss/bootstrap”

只是变量和mixin，否则每次在封装了CSS的组件中导入它时，它都会为您创建另一种样式

---

尝试在根应用程序中导入所有CSS内容，在组件中只导入变量

谢谢，我保留了原有的结构，但在variables.scss中，我使用了“@import../node_modules/bootstrap/scss/variables”和“@import../node_modules/bootstrap/scss/mixins”，并将“bootstrap.min.css”添加到angular-cli.json“style”中。谢谢