Angular library project import npm package theme css

Question

I have an Angular library project which has a component "pseudo". There is a main project that will use the library project. In the component "pseudo" (library project) I am using a 3rd party npm package

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

Now I also need to import a 3rd party theme css. I tried multiple ways but cannot figure out. I tried using @import in pseudo.component.scss but it didn't work in the main project (that uses this library project)

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

I also tried use the styleUrls in pseudo.component.ts that didn't work either.

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

I couldn't get the styles working in main project (which uses library project)

The library project using ng-package.json

Answer 1

You can import it in your style by adding it in your style array in angular.json file:

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