无法在 Angular 组件的 scss 文件中使用 styleUrls 进行样式设置

发布于 2025-01-17 23:10:15 字数 1575 浏览 0 评论 0原文

我在新的 Ionic Angular 应用程序上选择了 scss 选项。它的 html 容器包含三个选项卡页面。容器组件中的 scss 样式表控制所有页面的样式。 global.sccs 仅包含导入，没有样式，并且不导入容器的 scss。容器组件实现 OnInit。3 个选项卡页组件中的样式表被创建为空。

我无法通过向样式表添加样式来更改 3 个选项卡页中任何一个的样式。它继续使用容器的样式表。样式的选择器位于容器的 html 中：

explore-container.component.html

<div id="container">
  <strong>{{ name }}</strong>
  ...
</div>

explore-container.component.ts 文件：

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

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
  @Input() name: string;

  constructor() { }

  ngOnInit() {}

}

选项卡页 html 使用容器组件的选择器：

tab1.page.html

...

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

tab1.page.ts 文件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor() {}

}

我已经查看了有关外部样式表和封装的文档，但我仍然迷失方向。为什么我不能在选项卡页自己当前空的 scss 文件中添加样式？例如，为什么不在页面组件的 scss 中插入样式：

tab1.page.scss

 #container strong {
 font-size: 40px;

}

覆盖 explore-container.component.scss 中的样式？

 #container strong {
 font-size: 20px;

我是否

在某个地方缺少导入？如果是的话，在哪里？

原文

I selected the scss option on a new Ionic Angular app. It's html container holds three tab pages. The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't import the container's scss.. The container component implements OnInit.The stylesheets in the 3 tab page components are created empty.

I cannot change the style of any of the 3 tab pages by adding styles to their stylesheets. It continues to use the container's stylesheet. The selector for the style is in the container's html:

explore-container.component.html

<div id="container">
  <strong>{{ name }}</strong>
  ...
</div>

The explore-container.component.ts file:

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

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
  @Input() name: string;

  constructor() { }

  ngOnInit() {}

}

The tab page html uses the selector for the container component:

tab1.page.html

...

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

The tab1.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor() {}

}

I have reviewed the docs about external stylesheets and encapsulation but I'm still lost. Why can't I just add a style to the scss in the tab page's own presently empty scss file? Eg., why doesn't inserting styles into the page component's scss:

tab1.page.scss