如何将全局样式添加到Angular 6/7库

从 Compiling css in new Angular 6 libraries :

1. 在我们的库中安装一些devdependencies以捆绑css:

   • NG PACKAGR
   • SSCS束
   • TS节点

2. 创建一个 css-bundle.ts

3. 将theme.scss添加到库的/src目录中,该目录实际上包含并导入我们要捆绑的所有css。

4. 添加postbuild npm脚本以运行 css-bundle.ts :

5. 将其包含在angular.json中应用程序的styles标记中

我有办法解决这个问题。只需创建没有视图封装的库的根组件,它的所有样式都将是全局的。

我的库.component.ts

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

@Component({
  selector: 'lib-my-library',
  templateUrl: './my-library.component.html',
  styleUrls: ['./my-library.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-library.component.html网站

<!-- html content -->

我的库.component.scss

@import './styles/core.scss';

现在你 我的库.component.scss 和 科斯 是全球性的

样式/核心.scss

body {
    background: #333;
}

科斯 是可选的,我只是想保持根文件的干净。