web-dev-qa-db-ja.com

Angular 6 scssスタイルを適用しない

コンポーネントページと対応するスタイルシートがありますが、component.scssのクラスはページに適用されません。エラーはありません、私はまだなぜ疑問に思っていますか？

これは私のproduct-detailpage.component.htmlです

<div>
  <h1>Product Detail Page</h1>
</div>

これは.tsファイルです

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ProductdetailService} from '../productdetail.service';
@Component({
  selector: 'app-product-detailpage',
  templateUrl: './product-detailpage.component.html',
  styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {

  constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
    this.route.params.subscribe(params => console.log(params));
   }

  ngOnInit() {
  }

}

これは.scssファイルです

body{color:Red !important}
app-product-detailpage{
        h1{color:red !important}
}

ただし、グローバルなstyles.cssに変更を加えると問題なく動作することに気付きました。確認するために、ボディの色を緑に変更しました。

私のangularアプリはscssで動作するように設定されています。理由は何でしょうか？誰かが提案できますか？

cssangularsass
5
Arun-

SCSSはHTMLファイルproduct-detailpage.component.htmlでは機能しません。

理由はAngularはコンポーネントに shadow DOM を使用しています。つまり、タグ<body>および<app-product-detailpage>はコンポーネントのどこにもありません。

7
Reza Saadati

AngularのデフォルトのCSSカプセル化はEmulated(ViewEncapsulation.Emulated）なので、Angularは以下のようにレンダリングされます。

input[_ngcontent-c0] {
    border-radius: 5px;
}

したがって、スタイルを現在componentに設定する場合は、Nativeオプションを使用できます。

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

次のようにレンダリングされます。

input {
    border-radius: 5px;
}

しかし最後に、globalscssファイルを使用して<web component>のスタイルを定義することをお勧めします。

5
Dinh Duong

ドキュメント に従って、コンポーネントで指定されたスタイルはテンプレートにのみ適用でき、コンポーネントは除外されます。

これが、スタイルがコンポーネントのstyle.scssのコンポーネントで機能していないが、グローバルスタイルシートでは正常に機能している理由です。

それを行う1つの方法は、:Host擬似セレクター このドキュメント に従って、コンポーネントが配置されるコンテナにスタイルを追加できます。

ドキュメントには-

The :Host selector is the only way to target the Host element. You can't reach the Host element from inside the component with other selectors because it's not part of the component's own template. The Host element is in a parent component's template.

3
planet_hunter