30

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

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

可用于此的 angular.json"styles": [...]路径"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
4

4 回答 4

16

对于全局样式，我已经在这个问题中回答了。

更新

对于ng-packgr9.x 及更高版本

现在直接支持将资产复制到输出文件夹，如本页所述

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

旧答案

**对于其他版本**
  1. index.scss在库的根文件夹中创建一个文件。如果您遵循Angular 的本指南，那么您的路径将是my-project/projects/my-library/index.scss. 这也是您所在的文件夹package.json。

因此，index.scss将是包含您的变量和 mixins 的文件

$grey: #222;
@mixin mymixin {
    background: #222;
}
  1. 使用将其包含在您的库 scss 文件中import
@import '../../index.scss';

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

  1. 现在为了在你的应用项目中拥有这个文件，在构建后将它复制到 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\\\""
    },

    ...
}

  1. 现在，非常重要的是，不要使用ng build来构建你的库，而是使用npm run build. 这将自动执行复制命令。现在该index.scss文件与文件夹中的库一起导出my-project/dist。

  2. index.scss在您的应用项目的 scss 文件中包含

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

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

干杯!

PS变通办法不是最优雅的解决方案，但当没有其他办法时，它们会变通！

于 2019-07-26T11:42:20.490 回答
1

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

@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：样式是全局的

查看关于 ViewEncapsulation 的 Angular 文档，我在上面写了一篇博文。

于 2018-07-10T15:05:58.093 回答
-1

在项目上运行ng init，以便将项目初始化为 Angular CLI 项目。

编辑： 我的错，似乎他们init从 CLI 中删除了。你可以试试ng new --src

它可能会覆盖某些文件，因此请在项目的副本上尝试此操作。

于 2018-05-29T11:21:52.710 回答
-1

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

这是我的设置：

在此处输入图像描述

  1. 我的全局样式：styles.scss 在样式标签中输出。规则按预期针对所有匹配的类和元素。即使在组件内。

  2. 组件样式被封装。那是他们的价值支柱。它们覆盖全局变量并与组件系列保持组件特定的样式。

  3. @includes例如 variables.scss、mixins.scss 等会在需要时显式包含在任何组件 .scss 文件的顶部。

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

我们还需要什么？

于 2019-06-11T19:02:25.060 回答