web-dev-qa-db-fra.com

Comment utiliser MaterializeCSS dans Angular 2

Je veux vraiment utiliser materializecss in Angular2.

J'ai suivi les pas de 

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

J'étudie toujours Angular2 et utilise angular-cli. Mais je ne sais pas où ajouter le plugin bec. 

Je ne sais pas où se trouve le Webpack. Et j'ai aussi essayé de suivre ces étapes https://medium.com/@ladyleet/using-materializecss-with-votre-angulaire-2-angulaire-cli-app-2eb64b05a1d2#.cpgjvvo7m

mais je ne sais pas où est angular-cli-build.js?

oh, en fait j'utilise angular-cli. J'espère qu'il y a quelqu'un qui peut m'aider. 

J'aime beaucoup materializecss. Je l'utilise toujours quand j'utilise AngularJS.

Merci.

angularmaterialize
7
LordGrim

Vous pouvez importer css Materialise dans votre fichier styles.sass principal de la manière suivante.

// 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"
3
tomastrajan

Utilisez ce paquet npm et cette instruction:
Installation et configuration d'angular2-matérialiser dans des projets créés avec la CLI Angular 
https://github.com/InfomediaLtd/angular2-materialize

2
Alexander Gorban

Même j’ai essayé de matérialiser CSS avec Angular-Cli Project, en suivant les instructions de MaterialiseCss , et ça marche . Les étapes que j’ai suivies sont les suivantes:

Installer jquery, matérialiser-css et angular2-matérialiser

Ajouter jquery et matérialiser dans des scripts angular-cli

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

Ajouter materialize.css dans angular-cli

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

Et enfin importer MaterializeModule dans app.module.ts

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

Réponse de ce repo: https://github.com/stanleyeosakul/angular-travelville

Setup Materialise CSS

  1. Exécuter yarn add materialize-css@next (ou npm i materialize-css@next)

  2. Ajouter Materialize CSS dans .angular-cli.json (ou 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. Déclarez la variable M dans ./src/typings.d.ts (ou créez le fichier vous-même)

    TypeScript declare var M;

  4. Materialise CSS est maintenant intégré à Angular!

2
lokeshrmitra