MEAN 应用程序：无法在 Angular 材料中找到主题

Question

So I just discovered Angular material. I wanted to set it up, but the browser can't load the Angular material theme. It gives me the following error:

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

And,

Resource interpreted as Stylesheet but transferred with MIME type text/html: " http://localhost:3200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css ".

First, here is the structure of my project:

As you can see I added a element with a link to the indigo-pink theme in the index.hbs file. Before that I tried to import the theme into my styles.css file in the public folder with

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

Both ways ended up giving me the same above error. Does someone see what I'm doing wrong?

Answer 1

You definitely cannot refer to node_modules in the index.html. @import would be the correct way. Looks like you're using Webpack and not Angular CLI which would make this work automatically, so you need to find a Webpack plugin that handles @import and bundles the styles together, or if you have one, fix your webpack config. Try: https://github.com/webpack-contrib/css-loader