在多个组件之间共享样式并将其去重复

Question

我有几个带有ViewEncapsulation.None 的组件，以及一些应该应用于所有组件的样式。另外，我希望只将这段样式添加到编译后的包中一次。

我有两个想法怎么做，但他们都不适合。让我们来看看有两个组件的示例my-comp-1.component.scss和my-comp-2.component.scss，以及没有自己的角度组件的普通样式my-comp.common.scss。

1. 使用scss @import语句。它将公共脚本代码添加到每个组件的样式中，并在运行应用程序2时添加组件的style标记(包括每个组件内部的公共样式)。这意味着公共样式的副本覆盖自身，并且可以通过第二个组件的共享样式：

覆盖第一个组件的样式

1. 在角的styleUrls属性中使用多个文件。现在添加了3个样式标签，至少它工作正常。但问题是，main.js包实际上包含两个共享样式的副本(每个组件一个)，并且在运行时进行重复。是否可以将这种去重复移到编译时以减少包的大小？

现在，再多一些代码来重现问题。

• 应用程序是使用scss选择的
• 命令创建的，屏幕截图代码是通过npm run build编译的，但是生产版本具有相同的bundle

结构。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyComp1Component } from './my-comp-1.component';
import { MyComp2Component } from './my-comp-2.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComp1Component,
    MyComp2Component,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <my-comp-1></my-comp-1>
    <my-comp-2></my-comp-2>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = 'angular-test';
}

my-comp-1.component.ts

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

@Component({
  selector: 'my-comp-1',
  template: `
    <p class="my-comp my-comp-1">My first component</p>
  `,
  styleUrls: ['./my-comp.common.scss', './my-comp-1.component.scss'],
  // styleUrls: ['./my-comp-1.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MyComp1Component {
  title = 'angular-test';
}

my-comp-1.component.scss

// @import 'my-comp.common.scss';

.my-comp-1 {
  font-weight: bold;
}

my-comp-2.component.ts

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

@Component({
  selector: 'my-comp-2',
  template: `
    <p class="my-comp my-comp-2">My second component</p>
  `,
  styleUrls: ['./my-comp.common.scss', './my-comp-2.component.scss'],
  // styleUrls: ['./my-comp-2.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MyComp2Component {
  title = 'angular-test';
}

my-comp-2.component.scss

// @import 'my-comp.common.scss';

.my-comp-2 {
  font-style: italic;
}

my-comp.common.scss

.my-comp {
  color: blue;
}

scss @import全屏截图

​

​

带有角styleUrls的全屏幕截图

​

​

Answer 1

您可以在项目的src文件夹中导入style.scss中的样式，以便在挂载组件时和在包中不会重复样式。

Answer 2

在类型记录组件中使用ViewEncapsulation来共享样式：

@Component({
  selector: "toolbar",
  templateUrl: "./sth.component.html",
  styleUrls: ["./sth.component.scss"],
  encapsulation: ViewEncapsulation.None,
})