Angular庫項目導入npm package主題ZC7A628CBA22E28EB17B5F5C6AE2A266

Question

我有一個 Angular 庫項目，它有一個“偽”組件。 有一個將使用庫項目的主項目。 在組件“偽”（庫項目）中，我使用的是第 3 方 npm package

pseudo
|-- pseudo.component.html
|-- pseudo.component.scss
|-- pseudo.component.ts

現在我還需要導入第 3 方主題 css。 我嘗試了多種方法，但無法弄清楚。 我嘗試在pseudo.component.scss中使用@import，但它在主項目中不起作用（使用這個庫項目）

@import '~@ng-3rd/ng-3rd/themes/default.theme.css';

我還嘗試在pseudo.component.ts中使用styleUrls ，但也沒有用。

@Component({
  selector: 'my-pseudo',
  templateUrl: './pseudo.component.html',
  styleUrls: ['./pseudo.component.scss', '../../../../../../node_modules/@ng-3rd/ng-3rd/themes/default.theme.css']
})

我無法讓 styles 在主項目（使用庫項目）中工作

使用 ng-package.json 的庫項目

Answer 1

您可以通過將其添加到 angular.json 文件的樣式數組中來以您的樣式導入它：

      "options": {
        "outputPath": "dist/patient-app",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.webmanifest"
        ],
        "styles": [
          "src/styles.scss"
          "node_modules/path/to/the/style.scss"
        ],
        "scripts": [],
        "allowedCommonJsDependencies": [
          "moment-timezone",
          "qrcode"
        ]
      },