CSS 更改未反射(reflect)在 Angular 5 中

Question

我试图在 Angular 组件中添加 css，但它不起作用。我正在使用 ngx-bootstrap 的 tabmodule Tabs .

这是我的代码:

.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你可以从所有世界中获得最大的好处(全局风格和分隔/封装风格)

我会有一个 root.scss文件导入到我所有组件的 scss 文件中，以避免 (css) 代码重复。每个组件都包含一个 <div [ngClass]="root"> </div>因为它是根分区。

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

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

Angular CLI 有助于创建面向 scss 的元素以及将 css 元素转换为 scss:

对于旧元素:

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

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json(Angular 6+) or run:

ng config defaults.styleExt=scss

1. 重命名您现有的 .css文件到 .scss (即 styles.css 和 app/app.component.css)

2. 将 CLI 指向 styles.scss

Manually change the file extensions in apps[0].styles in angular.json

1. 指向组件以找到您的新样式文件

Change the styleUrls in your components to match your new file names

对于新元素:

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