Webpack中的角形材质主题 [英] angular material theme in webpack

问题描述

我正在尝试使用webpack在Angular(4)应用程序中设置角度材料，并且在文档中看到我需要包括一个默认主题才能使其正常工作.建议的方法之一是使用

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';

在styles.scss中，如果您使用的是cli-cli.

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

现在，我没有使用angular-cli，但是我有一个主要的styles.scss，因此我将其包含在内，并且我的应用程序构建良好，但是当我加载它时出现错误

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) 

那么，为什么现在要查找该文件?webpack不应在捆绑期间寻找它吗?而且，在 @import 之后，这意味着什么?

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?

谢谢

推荐答案

我遵循了 Webpack设置的角度指南，或多或少，因此我将所有供应商库都包含在基于 ./src/vendor.ts 的名为 vendor 的块中.我刚刚插入

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";

在其中，Webpack滚动了主题CSS.

in there and Webpack rolled in the theme CSS.

这篇关于Webpack中的角形材质主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！