web-dev-qa-db-ja.com

Angular 2でMaterializeCSSを使用する方法

私は本当に materializecss を使用したいAngular2。

私はからの手順に従いました

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を使用しています。私を助けてくれる人がいるといいのですが。

私はmaterializecssが本当に好きです。 AngularJSを使用しているときは、常にそれを使用しています。

ありがとう。

angularmaterialize
10
LordGrim

このリポジトリからの回答： https://github.com/stanleyeosakul/angular-travelville

マテリアライズCSSのセットアップ

  1. yarn add materialize-css@next（またはnpm i materialize-css@next）を実行します

  2. Materialize 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に統合されました！

5
lokeshrmitra

このようにして、メインのstyles.sassファイルにマテリアライズ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"
4
tomastrajan

このnpmパッケージと説明を使用してください：
Angular CLI
https://github.com/InfomediaLtd/angular2-materialize

2
Alexander Gorban

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"
 ]

そして最後にMaterializeModuleをapp.module.tsにインポートします

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