Import Angular Material theme in Nrwl Nx libs

Question

I have a nrwl nx workspace with apps and libs.

In one of my libs I want to import an angular material theme, but in browser I get the following warning:

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

I have imported the following line in my list.component.scss:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Actually, what I want was to import this in a styles.scss, but styles.scss is not available in libs and if I add one I don't know where to reference it.

Answer 1

Without any issues I'm importing Angular Material into Nx using ng add @angular/material, remember to have in angular.json the setup

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

Answer 2

Can you try adding the theming in the app specific style.css?

This is what I have in my setup. I have a library which contains Login.component. the template is using the material components. I added the style import in the app style.css which imports this library to use login component. It is working for me.

Answer 3

@DAG I have done something similar with one of my project. These are few things that I did.

(If you haven't already then install it with npm install --save @angular/material @angular/cdk @angular/animations)

Once you have material design installed and available in node_modules For this example we have workspace name demo and style file name demo-styles.scss and lib name my-lib

1. create a new lib into your workspace using ng g lib demoLib and follow along with command line guide and select no for creating module inside lib.
2. This will get you a library with src directory which has nothing in it.
3. Next, you can go ahead and add new directory named styles under src directory. Once you have done this you can add different style files inside styles directory.

4. Update tsconfig to reference your new styles folder.

   { { "compilerOptions": { "path": { "@demo/my-liib/*": ["libs/my-lib/src/styles/*"] } } }

5. Once you have done this,

   • you can import this lib in app/styles.scss with

     @import demo/my-lib/styles/demo-styles.scss.

Now you will be able to work with styles defined in stylefile.scss. Hope this helps.

Answer 4

Get inspired by the @angular/material library itself, and how they provide the _theming.scss file which is built with sass-bundler (if I remember correctly).

Once I did that in one of my libs, and I had to consume its styles just in the way you have to do it with Material itself, for following projects I just opted to have those styles in the global styles of my App, as I wasn't publishing the lib anyways.