Question

我正在尝试在Angular组件中添加CSS，但无法正常工作。我正在使用tabmodule Tabs中的ngx-bootstrap。

这是我的代码：

.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时，如下所示，似乎没有任何效果。没有应用border-bottom。

.tab-container {

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

更新将封装设置为ViewEncapsulation.None对我有用，但是这会给我的组件带来其他一些问题。如果有人能找出导致此问题不起作用的原因，那将是很好的。

Answer 1

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

使用.scss而不是.css，您可以从所有世界（全局样式和分隔/封装样式）中获得最大的好处

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

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

每个文件的行数很少的清晰代码。

Angular CLI有助于创建面向scss的项目以及将css项目转换为scss：

对于旧项目：

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

手动更改.angular-cli.json（Angular 5.x及更低版本）或angular.json（Angular 6+）或运行：
ng config defaults.styleExt=scss

将现有的.css文件重命名为.scss（即styles.css和app / app.component.css）
指向CLI来查找styles.scss

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

指向组件以查找新样式文件

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

对于新项目：

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

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

ng config --global defaults.styleExt=scss

源：https://stackoverflow.com/a/45255290/4770754

有一个很好的案例将scss设置为默认值，尤其是为了更新编码器，但是我想这个主意是：https://www.quora.com/Why-dont-browsers-support-SASS-LESS-natively

Answer 2

如果您的项目中包含yoursStyle.css或yours.component.css，它将读取yoursstyle.css。因此是否有时无法在单独的组件中覆盖样式。因此，您必须在.component.html或yourstyle.css

中更改样式

CSS更改未反映在Angular 5中

2 个答案:

对于旧项目：

对于新项目：