Question

如何设置index.scss并将变量，mixins等的全局样式表导入角度6库？

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

"styles": [...]可用于此的angular.json "projectType": "application"路径似乎也不适用于"projectType": "library"。

提前感谢您的帮助！

更新：我的项目是使用angular cli v6.0.5启动的，遵循本指南：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

Answer 1

您是否尝试过将组件的封装级别设置为none作为组件元数据的一部分？像这样：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

ViewEncapsulation级别为：

ViewEncapsulation.Emulated ：默认情况下，Angular模拟Shadow DOM。
ViewEncapsulation.Native ：使用浏览器自己的Shadow DOM。
ViewEncapsulation.None ：样式是全局的

签出Angular Docs on ViewEncapsulation，然后写了blog post on it。

Answer 2

在项目上运行init，以便将项目初始化为角度cli项目

编辑：我的坏，似乎他们从cli中删除了init，你可以尝试新的--src

它可能会覆盖所有文件，因此请在项目副本上尝试此操作

Answer 3

我认为人们可能会忽略以下事实：虽然存在封装选项，但全局样式会在样式标签中输出，并且可以在整个项目中级联。

这是我的设置：

我的全局样式：styles.scss在样式标签中输出。规则按预期针对所有匹配的类和元素。甚至在组件内部。
组件样式已封装。那是他们的价值支柱。它们会覆盖全局变量，并使用组件族保留特定于组件的样式。
@includes（例如variable.scss，mixins.scss等）在需要时明确包含在任何.scss组件的顶部。

@import '../../../../scss/includes/variables';

我们还需要什么？

Answer 4

对于全局样式，我已经在this question中回答过。

对于mixin和变量也有解决方法。

在库的根文件夹中创建一个Cap文件。如果您遵循this guide from Angular，则您的路径将为index.scss。这也是您的my-project/projects/my-library/index.scss所在的文件夹。

因此，package.json将是包含变量和mixins的文件

index.scss

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

import

或组件scss文件所在的相对路径。

现在，为了将此文件包含在您的应用程序项目中，请将其在构建后复制到dist目录。为此，请编辑您的角度库项目的@import '../../index.scss';文件（不是图书馆的文件）。

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\\\"" }, ... }来构建库，而要使用ng build。这将自动执行复制命令。现在npm run build文件与您的库一起导出到index.scss文件夹中。
在应用程序项目的scss文件中包含my-project/dist

index.scss

现在您已经在所有安装库的项目中拥有所有库mixins。

干杯！

PS 变通办法不是最优雅的解决方案，但是当其他任何方法都无法解决时，它们就会变通！

Angular 6库共享样式表

4 个答案: