Angular 6 库共享样式表

如何设置 index.scss 并将变量、混合等的全局样式表导入到 Angular 6 库中？

Angular CLI 生成一个带有根组件和组件 scss 的 lib，但添加或导入到根组件的样式不可用于子组件。默认情况下，封装样式是有意义的，但我还找不到有关如何设置它的任何信息或示例。

角度.json"styles": [...]可用于此目的的路径"projectType": "application"，似乎不适合使用"projectType": "library"任何一个。

在此先感谢您的帮助！

更新：我的项目是使用 Angular cli v6.0.5 启动的，遵循本指南：https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11 https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

TL;DR 指南：

ng new my-app --style=scss
ng generate library my-library --prefix ml

这是 Angular 6 生成的文件结构：

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts
        index.scss
        index.html
      README.md

封装版本：

    Angular CLI: 6.0.5
    Node: 10.2.1
    OS: darwin x64
    Angular: 6.0.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.6.5
    @angular-devkit/build-angular      0.6.5
    @angular-devkit/build-ng-packagr   0.6.5
    @angular-devkit/build-optimizer    0.6.5
    @angular-devkit/core               0.6.5
    @angular-devkit/schematics         0.6.5
    @angular/cli                       6.0.5
    @ngtools/json-schema               1.1.0
    @ngtools/webpack                   6.0.5
    @schematics/angular                0.6.5
    @schematics/update                 0.6.5
    ng-packagr                         3.0.0
    rxjs                               6.2.0
    typescript                         2.7.2
    webpack                            4.8.3

对于全局样式，我已经回答了这个问题 https://stackoverflow.com/a/55376370/1393400.

Update

For ng-packgr版本 9.x 及以上

不直接支持将资源复制到输出文件夹，如中所述这一页 https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "@my/library",
  "version": "1.0.0",
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

因此，在您的项目中，您可以通过以下方式从库导入文件来使用样式：

@import '@my/library/path-to-file/file-name.scss'

或使用显式相对路径（确保使用尽可能../按要求）

@import '../node_modules/@my/library/path-to-file/file-name.scss'

旧答案

1. 创建一个index.scss文件位于库的根文件夹中。如果你关注本指南来自 Angular https://angular.io/guide/creating-libraries，那么你的路径将是my-project/projects/my-library/index.scss。这也是您的文件夹所在的文件夹package.json is.

So, index.scss将是包含变量和 mixin 的文件

$grey: #222;
@mixin mymixin {
    background: #222;
}

2. 使用以下命令将其包含在您的库 scss 文件中import

@import '../../index.scss';

或者您的组件 scss 文件所在的任何相对路径。

3. 现在，为了在您的应用程序项目中包含此文件，请在构建后将其复制到 dist 目录。为此，请编辑 Angular 库的项目package.json文件（不是图书馆的）。

{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build && npm run copyScss",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\""
    },

    ...
}

4. 现在，非常重要，不要使用ng build要构建您的库，请使用npm run build。这将自动执行复制命令。现在index.scss文件与您的库一起导出my-project/dist folder.

5. 包括index.scss在您的应用程序项目的 scss 文件中

// ~ stands for the node_modules folder
@import '~my-library/index.scss';

现在，您在安装库的所有项目中都拥有了所有库 mixin。

Cheers!

PS变通办法并不是最优雅的解决方案，但当其他方法都不起作用时，它们就会变通！