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

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

我想使用相同的SCSS文件,以便将来可以在一处进行更改。

我在下面尝试过,但这对我不起作用。

Compiling css in new Angular 6 libraries

请引导正确的方向。

haihaome1 回答:对多个8号角项目使用相同的样式文件(.SCSS)

例如,您可以:

  1. 使用样式创建npmyarn包(可以是私有的)。
  2. 将其用作对其他项目的package.json依赖项
  3. 利润)

有用的链接:

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

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

其他选项可以是:

  1. 使用一个package.jsonangular.json创建单个角度项目
  2. 在不同的文件夹中有不同的项目
  3. 在每个项目中插入通用样式
  4. package.json中有不同的命令来运行不同的项目(如果需要同时运行,请在不同的端口上运行)
  5. angular.json中的不同项目具有不同的配置
,

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

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

可以通过创建一个角度库来解决这类问题,但是ng-packagr的默认角度构建设计师 @ angular-devkit / build-ng-packa 不会复制库资产。

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

如何安装

在您的角度项目中安装 @ linnenschmidt / build-ng-packagr

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

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

使用方法

I)。用@ linnenschmidt / build-ng-packagr:build替换您的库的构建架构师。

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

II)。像通常对应用程序一样,将资产全局规则添加到选项部分。

 "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","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/**"
            ]
          }
        }
      }
    }
本文链接:https://www.f2er.com/2759634.html

大家都在问