如何使用scss在Angular 11项目中定位多个浏览器

npm install node-sass

.my-element {
  // 通用样式

  @supports (-webkit-appearance: none) {
    // 适用于WebKit浏览器的样式
  }

  @supports (-moz-appearance: none) {
    // 适用于Firefox浏览器的样式
  }

  @supports (-ms-ime-align: auto) {
    // 适用于IE浏览器的样式
  }

  @supports (-o-appearance: none) {
    // 适用于Opera浏览器的样式
  }
}

.my-element.chrome {
  // Chrome浏览器的样式
}

import { Component, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements OnInit {

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
    const isChrome = /Chrome/.test(navigator.userAgent);
    if (isChrome) {
      this.renderer.addClass(document.body, 'chrome');
    } else {
      this.renderer.removeClass(document.body, 'chrome');
    }
  }

}