如何在 Angular 2 中使用 MaterializeCSS

Question

我真的很想在 Angular2 中使用materializecss。

我按照

的步骤

https://www.npmjs.com/package/angular2-materialize.

我还在学习 Angular2 并使用 angular-cli。但我不知道在哪里添加插件bec。

我不知道 webpack 在哪里。我也尝试遵循这些步骤 https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-app-2eb64b05a1d2#.cpgjvvo7m

但我不知道angular-cli-build.js 在哪里？

哦，顺便说一句，我正在使用 angular-cli。我希望有人可以帮助我。

我真的很喜欢 ma​​terializecss。我在使用 AngularJS 时总是使用它。

谢谢。

Answer 1

来自此回购的答案：https://github.com/stanleyeosakul/angular-travelville

设置物化 CSS

1. 运行yarn add materialize-css@next（或npm i materialize-css@next）

2. 将 Materialise CSS 添加到 .angular-cli.json（或 angular.json）

   json // .angular-cli.json { "apps": [ { ... "styles": [ "../node_modules/materialize-css/dist/css/materialize.min.css", "styles.css" ], "scripts": [ "../node_modules/materialize-css/dist/js/materialize.min.js" ], ... } ] }

3. 在./src/typings.d.ts中声明M变量（或者自己创建文件）

   typescript declare var M;

4. Materialize CSS 现已集成到 Angular 中！

Answer 2

您可以像这样在您的主styles.sass 文件中导入materialize css。

// override fonts path to prevent build errors (or use resolve-url loader)
$roboto-font-path: "../node_modules/materialize-css/fonts/roboto/"

// optionally override color variables eg: ...
$primary-color: color("materialize-purple");

@import "~materialize-css/sass/materialize"

Answer 3

即使我尝试使用 angular-cli 项目实现 css，也按照 MaterializeCss 的说明进行操作，并且它正在工作。 我遵循的步骤是：

安装 jquery、materialize-css 和 angular2-materialize

在 angular-cli 脚本中添加 jquery 并实现

  "scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/materialize-css/dist/js/materialize.js"
  ]

在angular-cli中添加materialize.css

 "styles": [
 "../node_modules/materialize-css/dist/css/materialize.css"
 ]

最后在 app.module.ts 中导入 MaterializeModule

 import { MaterializeModule } from 'angular2-materialize';
 @NgModule({
  imports: [
   MaterializeModule
  ]
 })

Answer 4

使用这个 npm 包和说明：
在使用 Angular CLI 创建的项目中安装和配置 angular2-materialize
https://github.com/InfomediaLtd/angular2-materialize