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"
        ]
      },