Why my angular application is not picking up handsontable css?

In my angular application only one component uses handsontable, so the css need not be application level.In the component I tried using syntax like this:

styleUrls: ['./../../../node_modules/handsontable-pro/dist/handsontable.full.min.css']

But it had no effect.Finally I had to copy handsontable.full.min.css in the same folder as that of my component refer the styleUrls like this:

styleUrls: ['./handsontable.full.min.css']

I do not like copying as that leads to same file being at 2 places. [As per handsontable documentation][1] to declare css at application level you have to add this to style.css [1]: https://handsontable.com/docs/7.4.2/frameworks-wrapper-for-angular-installation.html

@import '~handsontable/dist/handsontable.full.css';

I experimented putting this line in style.scss and style.css file in turn, that also had no effect. My Angular is 7.1.1 & handsontable is :

"@handsontable-pro/angular": "3.0.0",
"@handsontable/angular": "^5.1.1",

How can I avoid making 2 copies of handsontable css?

Edit: As per angular.json

 "styles": ["projects/survey-webapp/src/styles.css"]

As per suggestion of @spots I added handsontable css to it without success:

 "styles": [
          "projects/survey-webapp/src/styles.css",
          "node_modules/handsontable-pro/dist/handsontable.full.min.css"
        ],

Solution

Have you tried adding the stylesheet in the styles array in angular.json? I have never used Handsontable, but this is how I typically reference 3rd party stylesheets, such as bootstrap or ag-grid.

You'll want something like this:

"styles": [
    //other styles...
    "node_modules/handsontable-pro/dist/handsontable.full.min.css",
],