Search code examples
cssangular-materialliferay-7

Could not find Angular Material core theme - How to add Angular Material css to Liferay Portlet

I am building a Liferay Angular portlet that uses angular material inputs and some inputs are not rendering well at all. I am guessing that some CSS/JS is missing, but I can not figure it out what exactly.

My styling css file looks like this:

@import "~@angular/material/prebuilt-themes/deeppurple-amber";

Also, when I inspect with Developer tools, I see the following warning:

Could not find Angular Material core theme. Most Material components may not work as expected.

I have also tried referencing the css file from the AppComponent with styleUrls: ["/o/<my-portlet_name>/lib/app/styling.css"], but without any luck.

So, my question is - How to reference a CSS file within an Angular Portlet in Liferay ?

Solution

  • I have read over and over again this article and finally I made the following changes:

    1. changed the styling.css file into styling.scss
    2. changed its content to @import "../../../../../node_modules/@angular/material/prebuilt-themes/deeppurple-amber"; - I am not sure why are necessary 5 of ../, I was expecting that by using ~ to know where node_modules folder is
    3. added the following line in the property attribute of the @Component annotation in my Portlet: "com.liferay.portlet.header-portlet-css=/lib/app/styling.css" - yes, the extension is .css and not .scss