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

Question

我有一个角度4应用程序，我在angular-cli.json中有全局样式和脚本。然后我在登陆页面上单独 。在将着陆页转换为角度组件后，我还将其所有样式添加到angular-cli.json中。现在我的登陆页面的引导程序与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适合您，请使用它。