materializecss + Angular 6 怎么配置？答案

【问题标题】：materializecss + Angular 6 how to configure?materializecss + Angular 6 怎么配置？
【发布时间】：2018-08-02 20:20:35
【问题描述】：

我一般是 Angular 的新手，我正在尝试使用 materializecss 使用 Angular 6。我正在使用 CLI 创建我的组件。

我已经阅读了有关如何在 Angular 2 中执行此操作的材料，但 Angular 6 似乎有所不同，例如没有 angular-cli.json 文件。

如何让 materializecss 在 Angular 6 中运行？

用于安装materializecss的命令： npm i materialize-css@next

angular.json 尝试修改：

           "styles": [
              "./node_modules/materialize-css/dist/css/materialize.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/materialize-css/dist/js/materialize.js"
            ]

仅此一项是行不通的。

【问题讨论】：

应该有更好的阅读，你应该可以使用 CLI 仍然 npm install materialize-css@next
angular-cli.json 文件现在称为 angular.json
我正在寻找一个全面的一步一步让他们一起工作。我必须更改哪些文件？我尝试将样式和脚本添加到 angular.json，但这似乎还不够。
我已经使用npm install安装materialize-css了，只是我对Angular的了解不够，还有多少地方要改。
当我在本地尝试时似乎有效...您在做什么来检查它是否有效？进行更改后是否确保再次运行 ng serve？

标签： angular angular-material angular6 materialize

【解决方案1】：

你试过ngx-materialize吗？

他们的说明建议您还需要更改 tsconfig.json 文件并将以下内容添加到类型数组中：

“jquery”，
“materialize-css”

除非您正在寻找一个特定的组件，否则我会建议 angular-material 作为更好的选择。

【讨论】：

【解决方案2】：

在 Angular 中有几种使用具体化样式的方法。
列举一些：

下载 Angular 特定的 css 框架 - 请参阅 npm 了解 Angular 兼容的 css 框架。
从 materialize-css 网站下载源代码并将其粘贴到任何组件的 css 文件中。
在终端中输入 npm install materialize-css@next 下载 materialize 的 npm 包。

注意：

materialize-css 的一些特性需要 jquery。当我 nmp 安装 jquery 时，我目前在 Angular 中遇到问题...
然而，materialize-css 样式和颜色仍可用于不需要动画的组件中。

关于 Angular 特定包的一句话：

ngx-materialize 非常适合轻松安装、组件样式和动画，但已弃用依赖项。

materialize-angular 也不错，但目前没有任何组织支持，因此也有许多过时的依赖项。

如果您不确切知道为什么需要特定角度的 css 框架，请考虑使用 vanilla Materialize 或 Bootstrap 框架。

【讨论】：