CSS变化在Angular 5中不反映

Question

我正在尝试在角组件中添加CSS，但它不起作用。我正在使用ngx-bootstrap选项卡的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>

在DOM中创建了以下内容：

<tabset _ngcontent-c17="" class="tab-container">
    <ul class="nav nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object Object]">
        <li class="nav-item ng-star-inserted" ng-reflect-ng-class="nav-item,">
            <a class="nav-link" href="javascript:void(0);" id="">
                <span ng-reflect-ng-transclude="[object Object]"></span>
                <span _ngcontent-c17="" class="ng-star-inserted">Tab 1</span>
                <i _ngcontent-c17="" class="fas fa-times ng-star-inserted"></i><!--bindings={}-->
            </a>
        </li>
    </ul>

现在，当我尝试添加CSS时，如下所示。边界底没有应用。：

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

更新将封装设置为ViewEncapsulation.None对我有用，但这将为我的组件造成其他问题。如果有人能弄清楚这是不起作用的原因，那就太好了。

Answer 1

我强烈建议使用某种形式的SASS或其他形式的SCSS文件。

使用.scss代替.css，您可以从各个世界（全球风格和隔间/封装样式）中获得最大的好处

我将在所有组件的SCSS文件中导入一个root.scss文件以避免（CSS）代码重复。并且每个组件都包含一个<div [ngClass]="root"> </div>，因为它的rootdiv。

这将意味着某些全球样式规则将适用，但其余的CSS将在该组件的component.scss中。

每个文件的非常清晰的线路计数。

Angular CLI有助于创建一个面向SCSS的项目，并将CSS项目转换为SCSS：

旧项目：

1. 将默认样式扩展名更改为 scss

手动更改。

ng config defaults.styleExt=scss

2. 将现有的.css文件重命名为.scss（即STYLES.CSS和APP/APP/APP.COMPONENT.CSS）

3. 指向CLI查找样式。Scss

手动更改 apps[0].styles中的文件扩展名。

4. 将组件查找您的新样式文件

更改组件中的styleUrls以匹配您的新文件名

新项目：

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

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

ng config --global defaults.styleExt=scss

来源：https：//stackoverflow.com/a/45255290/47770754

scss是默认值有一个很好的理由，尤其是为了新的编码器，但我想这个想法是：https：//www.quora.com/why-dont-browsers-support-无聊的

Answer 2

如果您的项目中有您的ststyle.css或您的s.component.css，则读取您的stystyle.css。因此，您是否在单独的组件中覆盖了单独的组件中的样式。因此，要么您必须在.component.html中更改样式，要么在您的Style.css