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適合您，請使用它。