Angular 库项目导入 npm 包主题 css

Question

我有一个 Angular 库项目，它有一个“伪”组件。有一个将使用库项目的主项目。在组件“伪”（库项目）中，我使用的是第 3 方 npm 包

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

现在我还需要导入一个 3rd 方主题 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']
})

我无法让样式在主项目（使用库项目）中工作

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