Reputation: 3614
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
Upvotes: 3
Views: 3178
Reputation: 1
I tried various things to include the material theme within the element.js (as a single file) that I create with "npm run build:client-reports:externals" but no luck.
It only works if I reference the main.js too in the project that I'm trying to use my element.js
How can we include the material theme within the exported element.js as single file without requiring any other reference like main.js
The code is available on https://github.com/semihbas/angular-elements-micro-frontends
Happy to provide more details if required.
Upvotes: 0
Reputation: 27334
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.
Upvotes: 2