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

Question

我有一个angular 4应用程序，我在angular-cli.json中有全局样式和脚本。 然后我在登陆页面上单独工作。 在将着陆页转换为角度组件后，我还将其所有样式添加到angular-cli.json中。 现在我的登陆页面的bootstrap与node_modules中的全局引导程序冲突，我的应用程序中断了。

目前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适合您，请使用它。