Trouble shooting Material styles not loading on mat-button Angular 7?
Solution 1
For me, I had created buttons that were unstyled. I actually copied the example from the docs on menu. I didn't realize that the buttons in the example needed more than just that which was documented in the API tab. They otherwise worked with just,
import {MatButtonModule} from '@angular/material/button';
So when I ran that import in my app's module.ts
and added it to my imports
array it worked. As to why manually including the style with a <link>
element didn't work,I was getting the following error when I tried that:
Refused to apply style from 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
As for the @import
in styles.scss
, it seems to be a NOP with Angular 7 if you have
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you also have it configured in your angular.json
. Everything is working now without the @import
statement anywhere.
Solution 2
Please remove the css import from angular.json and put it into your styles.scss file.
So it will look like this.
angular.json
"architect": { "build": { ... "styles": [ "src/styles.scss" ], ... },
styles.scss
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
If you have issue with upper one add the below lines to styles.scss
@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $candy-app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($candy-app-theme);
I just paste it from docs.
Also you can add this to index.html by following code
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
Let me know if its work or you need anything else.
Related videos on Youtube
Evan Carroll
#1 User for DBA.SE 2017. Available for contracting: 281.901.0011 PostgreSQL & PostGIS / MySQL / SQL Server JavaScript, Typescript, Rx.js, Node.js, Angular Also: C / Perl / Python / Rust / x86 Assembly
Updated on June 04, 2022Comments
-
Evan Carroll almost 2 years
I created an app with
ng new
and added Material withng add @angular/material
. When I runng serve
I do not see to have the material style.css loaded despite having in myangular.json
"architect": { "build": { "options": { "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss" ], ...
What else am I missing? When I look at the chrome dev console, I see it's loading
content_scripts.css
frontend.css
shadow.css
And one css for the fonts (
fonts?family..
) and one for the iconsicon?family..
I've also tried adding to my
styles.scss
the following,@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Which also resulted in no additional css files being brought in.
-
Evan Carroll about 5 yearsI tried that too I added that note in the question except my import was
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
(with a tilde) I had the wrong import statement previously. -
AlokeT about 5 yearsRemove ~ this before @angular, cause from angular 6 how you import was changed.
-
Evan Carroll about 5 yearssame thing, no joy.
-
AlokeT about 5 yearsCan you just remove @angular/material and add it again through ng add @angular/material .. and when there is question select theme used Custom there
-
Evan Carroll about 5 yearsthat's what I did to get it in the first place.
-
AlokeT about 5 yearsThen just show me your styles.scss file in the question
-
Evan Carroll about 5 yearsIt's in the question, that's literally all I have in it -- I started with the Tilde (which is what the docs show) and removed it as per your suggestion and it changed nothing.
-
AlokeT about 5 yearsJust paste the code that inside styles.scss file in your question. So I can figured it out.
-
Evan Carroll about 5 yearsIt's in the question, that's literally all I have in it -- I started with the Tilde (which is what the docs show) and removed it as per your suggestion and it changed nothing. – Evan Carroll 3 mins ago Edit Delete
-
AlokeT about 5 yearsSee i update the answer try it if its not working then I can make a stackblitz demo
-
Evan Carroll about 5 yearsMajor oversight on my side, the MatButton I was using to generate the style worked fine because it was a just a
<button>
(duh!) adding that and it's all golden. I upvoted for your work you put into it. Thanks -
TheCuBeMan over 4 yearsFor my issue, the solution was to manually add the import of the CSS file. For some reason, it wasn't automatically imported when I installed material in the app. Never happened to me before, that's why I wasn't checking in this direction... Anyway, the important thing is that I resolved the issue thanks to your answer here, and now can move on with the project. Thanks!
-
eazybob about 3 yearsThanks! That helped me too!
-
Vega over 2 yearsThis question is not closed
-
Semo over 2 yearsFor me the line with
@import ... *.css
inside the component's scss file fixed the issue. That did it. Many thx.