在Angular 4中导入材料设计布局网格答案

【问题标题】：Import Material deisgn Layout Grid in Angular 4在Angular 4中导入材料设计布局网格
【发布时间】：2018-06-06 10:52:23
【问题描述】：

我想在我的 Angular 4 项目中添加 this 网格。我已经使用

安装了这些网格

npm install @material/layout-grid

这个命令，但现在我无法在我的 angular 4 项目中导入。我的代码是这样的

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">One</div>
    <div class="mdc-layout-grid__cell">Two</div>
    <div class="mdc-layout-grid__cell">Three</div>
  </div>
</div>

但是我的 div 没有正确对齐。请看下图。

我得到这样的结果。我应该怎么做才能使用这个布局网格水平对齐 div？请帮忙。

【问题讨论】：

不导入样式吗？
你能告诉我如何导入这个组件的 css 我在导入 css 时收到警告
Scss 导入看起来像这样 @import "/path/to/my/file"; 你应该把它放在你组件的样式表中。
如果您对此感到困扰，我建议您使用来自@angular/material 包material.angular.io/components/grid-list/overview 的官方材质网格组件，请参阅指南以开始使用。
我想要响应式网格不想为响应性编写额外的代码，这就是我使用布局网格的原因

标签： css angular grid material-design

【解决方案1】：

您的 Angular 项目可能没有导入 css 和 js 文件。看.angular-cli.json文件，应该有这样的：

"styles": [
        "../node_modules/path-to-your-module-css", // add this line 
        "styles.css"
      ],

或者您也可以将其直接导入到您的组件 css：

@import "../node_modules/path-to-your-module-css";

【讨论】：

如果我在 angular.cli.json 文件中手动编写 css 路径，这是一种正确的方法吗？
是的，这是正确的方法。
谢谢@mathevs