igxGrid Not loading styles

Some of the IGX Components do not seem to be working properly. This is what my grid looks like..

Component.html

I have followed the tutorial supplied by Infragistics, not sure what is going here. I have also added the following to my styles.scss and installed igniteui,ignite-ui-angular,igniteui-angular-core and ingiteui-angular-charts via NPM. I am importing IgxGridModule as well.

The IGXTabs also seem to be displaying the same behavior

@import ‘~igniteui-angular/lib/core/styles/themes/index’;
@include igx-core();
@include igx-theme($default-palette);

What Am i missing?

Hello Andy,

Thank you for posting in our community.

I have created a sample using igxTabs with igxGrid and igxDataChart. On my side, everything renders as expected and SASS at-rules are correctly applied.

Please test this small application on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with any information you might consider relevant.

Kind regards,
Martin

Thank you for the reply, but that doesn't seem to work. The only way to fix the issue was to copy and paste the .css file from './node_modules/igniteui-angular/styles/igniteui-angular.css' to my global styles.css file. I am not sure why this is necessary, but it seems my project is having difficulty loading that specific file. I suppose we can mark this as answered unless you have any suggestions as copying the contents of the .css file is not desired. 

Hello Andy,

By design, there should be no need to manually copy the CSS files in the node_modules folder. They should be populated automatically during the npm install process. Using the “copy&paste” approach is associated with heighten risk since when a new version is released and you update the packages you have to copy again the styles.

If you provide me with a small, isolated sample reproducing the issue, which I can run and debug on my side I might be able to find the root cause of this behavior.

Looking forward to hearing from you.