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.
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"
]
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.
@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
ng g lib demoLib
and follow along with command line guide and select no for creating module inside lib.styles
under src
directory. Once you have done this you can add different style files inside styles
directory.Update tsconfig to reference your new styles folder.
{ { "compilerOptions": { "path": { "@demo/my-liib/ *
": ["libs/my-lib/src/styles/ *
"] } } }
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.