angular material theme in webpack

问题

I'm trying to set up angular material in my Angular (4) app with webpack, and I see in the documentation that I need to include a default theme for it to work. One of the suggested ways to do that is with

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

in your styles.scss if you are using angular-cli.

Now, I'm not using angular-cli, but I have a main styles.scss, so I included this and my app builds fine, but then when I load it I get an error

GET http://localhost:8080/@angular/material/prebuilt-themes/indigo-pink.css 404 (Not Found) 

So, why is this looking for this file now? shouldn´t webpack look for it during bundling time? And also, what does that ~ mean after the @import?

Thanks

回答1:

I followed the Angular guide for Webpack setup, more or less, so I have all my vendor libraries included in a chunk called vendor, based on ./src/vendor.ts. I just inserted

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

in there and Webpack rolled in the theme CSS.

来源：https://stackoverflow.com/questions/44463619/angular-material-theme-in-webpack