且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular 6 库共享样式表

更新时间:2023-11-22 17:36:22

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

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
  2. 将此包含在您的库 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!