47

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

我的库的名称是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)

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

4

4 回答 4

32

我有一个解决方法。只需在没有视图封装的情况下创建库的根组件，其所有样式都将是全局的。

我的库.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() {
  }

}

我的库.component.html

<!-- html content -->

我的库.component.scss

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

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

样式/core.scss

body {
    background: #333;
}

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

更新：如果你也想要你的 mixins 和变量，那么请遵循这个答案。

于 2019-03-27T11:43:36.807 回答
7

正如@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.

于 2021-04-05T17:03:15.853 回答
4

从在新的 Angular 6 库中编译 css：

  1. 在我们的库中安装一些 devDependencies 以捆绑 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. 在库的 /src 目录中添加 _theme.scss，该目录实际上包含并导入我们要捆绑的所有 css。

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

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

于 2019-02-20T10:32:35.317 回答
2

从这个问题解决方案

安装cpx并scss-bundle作为开发依赖项到您的package.json. 然后在你的 package.json “scripts” 属性中添加以下条目：

"scripts": {
  ...
  "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
  "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
  "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
  ...
}

将“mylib”替换为您的真实库名称，然后在您的终端中运行build-mylib。这会将您的 scss 资产编译到您的 dist 文件夹中。

您在实际的 Angular 项目中使用这种全局样式，只需angular.json在项目设置中的文件中导入它们：

"styles": [
  "src/styles.scss",
  "dist/my-shiny-library/_theme.scss"
],

（如果您的项目在同一个工作区中，则使用 dist，如果是导入的库，则使用 node_moduled）

于 2019-05-31T21:53:27.313 回答