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

【问题标题】：Angular 4 - Not use styles from angular-cli.jsonAngular 4 - 不使用 angular-cli.json 中的样式
【发布时间】：2018-09-16 01:51:42
【问题描述】：

我有一个 Angular 4 应用程序，其中我在 angular-cli.json 中有全局样式和脚本。然后我单独在着陆页上工作。将登录页面转换为 Angular 组件后，我还将其所有样式添加到 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 文件之间的冲突。我想知道是否可以将我的登陆页面样式与应用程序样式分开。任何帮助将不胜感激。谢谢。

【问题讨论】：

请分享你的 Angular cli json
你能分享你的LandingPage 组件和它的样式吗？
@BunyaminCoskuner 你的意思是 html 和 css 文件？这会让这个问题真的很长，你不觉得吗？我已经添加了 angular-cli.json，所以每个人都可以了解我正在使用的 css 文件。
@SkGolamSaroar 我不是指所有的代码，只是组件的元数据。我正在尝试使用ViewEncapsulation 提出解决方案。
还有，你用sass吗？

标签： css angular twitter-bootstrap

【解决方案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 适合你，就用那个。

【讨论】：