Angular 6 库共享样式表 [英] Angular 6 library shared stylesheets

问题描述

如何设置 index.scss 并将变量、mixin 等的全局样式表导入 angular 6 库?

How can you setup a index.scss and import global stylesheets for variables, mixins, etc, to an angular 6 library?

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

Angular CLI generates a lib with a root component & component scss, but the styles added or imported to the root component are not available to children components. Which makes sense by default to encapsulate the styles, but I just can't find any information or examples on how to set this up yet.

angular.json "styles": [...] 路径，可用于 "projectType": "application"，似乎没有与 "projectType": "library" 一起使用.

The angular.json "styles": [...] paths that can be used for this with "projectType": "application", don't seem to work with "projectType": "library" either.

预先感谢您的帮助！

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

UPDATE: My project was initiated using angular cli v6.0.5, following this guide: 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生成的文件结构:

This is the file structure angular 6 generates:

    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

推荐答案

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

For global styles, I've answered it in this question.

对于 ng-packgr 9.x 及以上版本

For ng-packgr versions 9.x and above

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

Copying assest to output folder is now directly supported as explained in this page

{
  "$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 所在的文件夹.

1. Create an index.scss file in your library's root folder. If you follow this guide from Angular, then your path will be my-project/projects/my-library/index.scss. This is also the folder where your package.json is.

所以，index.scss 将是你的变量和 mixins 的文件

So, index.scss will be the file with your variables and mixins

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

1. 使用 import
将此包含在您的库 scss 文件中

1. Include this in you library scss files using import

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

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

or whatever relative path your component scss file is at.

1. 现在为了在您的应用程序项目中包含此文件，请将其在构建后复制到 dist 目录.为此，请编辑您的 Angular 库项目的 package.json 文件(不是库的).

1. Now in order to have this file in your app project, copy it post build to the dist directory. To do this, edit your angular library's project's package.json file (NOT THE LIBRARY'S).

{
    "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 文件夹中.

1. Now, very important, DO NOT use ng build to build your library, instead use npm run build. This will automatically execute the copy command. Now the index.scss file is exported along with your library in the my-project/dist folder.

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

Include the index.scss in your app project's scss files

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

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

Now you have all your library mixins in all of the projects you installed your library.

干杯！

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

PS Workarounds are not the most elegant solutions, but when nothing else works, they work around!

这篇关于Angular 6 库共享样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！