CSS变化不反映在角度5中

我试图在Angular组件中添加css，但它不起作用。我正在使用ngx引导程序的

tabmodule

这是我的密码：

.component.html

<tabset class="tab-container">
        <tab *ngFor="let tab of tabs" active="tab.active" appTabHighlight>
            <ng-template tabHeading><span>{{tab.title}}</span> <i class="fas fa-times" (click)="removeTab($event, $index)"></i></ng-template>

            <h1>{{tab.content}}</h1>
        </tab>

    <button class="btn btn-default" (click)="addTab()"></button>
</tabset>

更新

---

将封装设置为

viewenclosuration.None

对我有效，但这会导致我的组件出现其他一些问题。如果有人能找出这个方法不起作用的原因，那就太好了。

如果你的项目中有yoursStyle.css或yours.component.css，它会显示yoursStyle.css。因此，在单独的组件中覆盖样式有时不起作用。因此，要么您必须更改.component.html中的样式，要么您必须更改.css中的样式。我强烈建议您使用某种形式的SASS或其他文件，如SCSS文件

使用

.scss

而不是

.css

您可以从所有领域（全局样式和分区/封装样式）获得最大的好处

我将在所有组件的scss文件中导入一个

root.scss

文件，以避免（css）代码重复。每个组件都将包含一个

，作为它的根div

这意味着将应用一些全局样式规则，但css的其余部分将位于该组件的

component.scss

中

非常清晰的代码，每个文件的行数很小

Angular CLI有助于创建面向SCS的项目和将css项目转换为SCS：

对于旧项目：

将默认样式扩展名更改为

scss

手动更改.angular-cli.json（angular 5.x及更早版本）或angular.json（angular 6+）或运行：

将现有的

.css

文件重命名为

.scss

（即styles.css和app/app.component.css）

指向CLI以查找styles.scss

手动更改angular.json中的

apps[0].styles

中的文件扩展名

指向零部件以查找新样式文件

更改组件中的

样式URL

，以匹配新文件名

对于新项目： 如果要为将来创建的所有项目设置默认值，请运行以下命令：

ng config --global defaults.styleExt=scss

资料来源：

---

有一个很好的理由将scs作为默认值，特别是为了更新的编码人员，但我想想法是：

您在哪里添加css，在哪个文件中？您是否使用

styleurl:['./your.component.css']将该文件包含到组件中

？是的，我正在

组件.scss

文件中添加它，是的，它包含在StyleURL中。@MaximMazurok是因为tabset是一个外部组件，我无法为此更改css？如果更改

视图封装

导致它工作，听起来您的样式放错了位置。如果需要更多帮助，请共享解决方案的结构。@Coder我同意异端猴子，请共享项目结构。截图就可以了。

.tab-container {

    ul {
      &.nav-tabs {
        border-bottom: 4px solid red;
      }
    }
}

ng config defaults.styleExt=scss

ng new your-project-name --style=scss

ng config --global defaults.styleExt=scss