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

如果您使用的是 angular-cli，则在您的 style.scss 中.

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

现在，我没有使用 angular-cli，但我有一个主要的 style.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 设置的 Angular 指南，或多或少，所以我将所有供应商库都包含在一个名为 vendor 的块中，基于 ./src/vendor.ts.我刚刚插入

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屋！