webpack 中的 Angular Material 主题

Question

我正在尝试使用 webpack 在我的 Angular (4) 应用程序中设置 Angular Material ，我在文档中看到我需要包含一个默认主题才能正常工作。 建议的方法之一是使用

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

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

现在，我没有使用 angular-cli，但我有一个主要的 styles.scss，所以我包含了它并且我的应用程序构建正常，但是当我加载它时出现错误

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

那么，为什么现在要查找这个文件？ webpack 不应该在打包时寻找它吗？还有，@import 之后的 ~ 是什么意思？

谢谢

Answer 1

我关注了 Angular guide for Webpack setup ，或多或少，所以我将所有 vendor 库都包含在一个名为 vendor 的 block 中，该 block 基于 ./src/vendor.ts。我刚插入

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

在那里，Webpack 加入了主题 CSS。