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

Question

我试图以与在角度应用程序中相同的方式添加全局样式，但它完全不起作用。

我的库的名称是example-lib，所以我添加styles.css到/projects/example-lib/。我在主angular.json文件中添加了样式：

...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE 
        ],
      },
...

但是当我尝试使用命令构建库时：

ng build example-lib

我收到错误消息：

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

我想这是在单独的库中添加全局样式的另一种方法。有人可以帮助我吗？

Answer 1

我有一个解决方法。只需创建您的库的根组件，而无需进行视图封装，那么它的所有样式都是全局的。

my-library.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 -->

my-library.component.scss

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

现在，您的my-library.component.scss和core.scss是全局的

样式/core.scss

body {
    background: #333;
}

core.scss是可选的，我只想保持根文件的干净。

更新：如果您也需要mixin和变量，请遵循以下答案。

Answer 2

正如@codeepic已经指出的那样，目前有一个标准解决方案。

在ng-package.json添加

"assets": ["./styles/**/*.css"]

提供的路径应该是文件的路径。同时，它们将是您的/dist文件夹中的路径。
在构建时，文件将被复制到/dist。您的库的用户将能够将它们添加到他们的全局样式中，如下所示。

/* styles.css */
@import url('node_modules/<your-library-name>/styles/<file-name>');

这样您就可以复制任何类型的文件。

PS 与 CSS 一起使用时，不要忘记您可以创建一个index.css文件，该文件可以像node_modules/<your-library-name>/styles.

Answer 3

来自在新的 Angular 6 库中编译 css：

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

   • ng-packagr
   • scss 捆绑包
   • ts节点

2. 创建 css-bundle.ts：

   import { relative } from 'path';
   import { Bundler } from 'scss-bundle';
   import { writeFile } from 'fs-extra';
   
   /** Bundles all SCSS files into a single file */
   async function bundleScss() {
     const { found, bundledContent, imports } = await new Bundler()
       .Bundle('./src/_theme.scss', ['./src/**/*.scss']);
   
     if (imports) {
       const cwd = process.cwd();
   
       const filesNotFound = imports
         .filter(x => !x.found)
         .map(x => relative(cwd, x.filePath));
   
       if (filesNotFound.length) {
         console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
         throw new Error('One or more SCSS imports failed');
       }
     }
   
     if (found) {
       await writeFile('./dist/_theme.scss', bundledContent);
     }
   }
   
   bundleScss();
   

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

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

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