css - Angular 4 - 不使用 angular-cli.json 中的样式

Question

我有一个 Angular 4 应用程序，其中我在 angular-cli.json 中有全局样式和脚本。然后我在着陆页上单独工作。在我将登陆页面变成一个 Angular 组件之后，我也在 angular-cli.json 中添加了它的所有样式。现在我的登录页面的 Bootstrap 与 node_modules 中的全局 Bootstrap 发生冲突，我的应用程序中断了。

目前 angular-cli.json 看起来像这样:

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./dist/css/landing/bootstrap.min.css",
    "./dist/css/landing/font-awesome.min.css",
    "styles.css",
    "./dist/css/AdminLTE.min.css",
    "./dist/css/skins/_all-skins.min.css",
    "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
    "../node_modules/froala-editor/css/froala_style.min.css"
  ],

这是在 landing.component.ts 中:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})

export class LandingComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

我差点错过最后期限，我无法解决两个巨大的 css 文件之间的冲突。我想知道我是否可以将我的着陆页样式与应用程序样式分开。任何帮助将不胜感激。谢谢。

Answer 1

您可以尝试按如下方式封装您的着陆页。

ViewEncapsulation.Native 会将您的组件及其样式包装在影子根中。将您的组件样式文件更改为 scss 并将这些样式导入组件样式文件并从 .angular-cli.json 中删除它们。

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  encapsulation: ViewEncapsulation.Native 
})

export class LandingComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

landing.component.scss

@import '<path-to-dist>/dist/css/landing/bootstrap.min.css';
@import '<path-to-dist>/dist/css/landing/font-awesome.min.css';

当您检查 DOM 时，您会看到 app-landing 已封装。

编辑

或者，您可以使用默认的 ViewEncapsulation.Emulated(您不必在元数据中设置它)。这将做的是创建具有所有样式的自定义属性并将这些属性也添加到您的标记中。某些浏览器可能不支持 Shadow DOM。两者都试试，如果 Emulated 适合您，就使用它。