Question

我正在使用Angular CLI和Bootstrap 4.经过一些痛苦的设置后，我已经准备好了。一旦'ng serve'完成构建到内存中，我打开应用程序，在检查了一些元素后，我注意到引导类多次出现。

在检查declare @tmp TABLE (id int, Code int, EntityId NVARCHAR(10)) insert into @tmp (id, Code, EntityId) values (3, 22209776 , 1), (4, 143687971, 3), (4, 143687971, 4), (4, 143687971, 5), (4, 143687971, 15), (5, 143658155, 7), (5, 143658155, 8) select pvt.id ,pvt.Code ,[1] as EntityID1 ,[2] as EntityID2 ,[3] as EntityID3 ,[4] as EntityID4 from ( select id, Code, EntityId ,ROW_NUMBER() over(partition by code order by EntityId) as RowNum from @tmp ) a pivot (MAX(EntityId) for RowNum in ([1], [2], [3], [4])) as pvt之后，我可以看到有lazy=no-proxy个元素（3x），并且所有元素都包含引导类。

我的应用设置如下：

<head>

变量.scss中的

<style>

在app.scss，app.component.scss，toolbar.component.scss

中

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

每次我添加另一个组件并使用自己的scss类导入'变量'时，会添加另一个@import "../node_modules/bootstrap/scss/bootstrap"; ...内容，其中包含完整的Bootstrap.css。

在我的.angular-cli.json

中

@import "./variables"

最后，在我的package.json

中

<style>

}，

任何想法为什么它一直在增加？

Answer 1

确保import "../node_modules/bootstrap/scss/bootstrap";只是变量和mixins，否则每次您在已封装CSS的组件中导入它时，它都会为您创建另一种样式。

尝试导入根应用程序中的所有CSS内容，并在组件内部仅导入变量。

Angular-CLI：'ng serve'多次内联Bootstrap

1 个答案: