对多个 angular 8 个项目使用相同的样式文件 (.SCSS)

Question

我在 angular 8 开发了不同的项目并且具有相同的样式。

我想使用相同的 SCSS 文件，以便将来可以在一个地方进行更改。

我已经在下面尝试过，但这对我不起作用。

Compiling css in new Angular 6 libraries

请指正方向

Answer 1

例如您可以：

创建带有样式的 npm 或 yarn 包（它可以是私有的）。
将它作为 package.json 对不同项目的依赖
利润）

有用的链接：

https://docs.npmjs.com/creating-and-publishing-private-packages

https://docs.npmjs.com/creating-and-publishing-an-org-scoped-package

其他选项可以是：

使用一个 package.json 和 angular.json
在不同的文件夹中有不同的项目
在每个项目中插入通用样式
在 package.json 到运行不同的项目中有不同的命令（如果你需要它在不同的端口上同时运行）
在 angular.json 中针对不同的项目有不同的配置

Answer 2

我的问题在@qiAlex 的回答的帮助下得到了解决，但我在这里发布了解决此类问题的完整过程。

我从 https://github.com/linnenschmidt/build-ng-packagr 得到了以下解决方案。

这类问题可以通过创建 angular 库来解决，但是默认 angular build architect @angular-devkit/build-ng-packagr for ng- packagr 不会复制库的资产。

@linnenschmidt/build-ng-packagr可用于复制库的资源。 Angular Build Architect 将复制库构建中的所有资产。

如何安装

将 @linnenschmidt/build-ng-packagr 安装到您的 angular 项目中。

npm install @linnenschmidt/build-ng-packagr --save-dev

或

纱线添加@linnenschmidt/build-ng-packagr --dev

如何使用

我）。用@linnenschmidt/build-ng-packagr:build.

替换你的库的构建架构师

 "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",

二）。将您的资产 glob 规则添加到选项部分，就像您通常对应用所做的那样。

 "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }

最终的 angular.json 文件可能如下例所示：

"weave-styles": {
      "projectType": "library",
      "root": "projects/weave-styles",
      "sourceRoot": "projects/weave-styles/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@linnenschmidt/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/weave-styles/tsconfig.lib.json",
            "project": "projects/weave-styles/ng-package.json",
            "assets": [
              "src/assets"
            ]
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/weave-styles/src/test.ts",
            "tsConfig": "projects/weave-styles/tsconfig.spec.json",
            "karmaConfig": "projects/weave-styles/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/weave-styles/tsconfig.lib.json",
              "projects/weave-styles/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }

对多个 angular 8 个项目使用相同的样式文件 (.SCSS)

Use same Styling files (.SCSS) for multiple angular 8 projects

sass

angular

angular-library

如何安装

如何使用